<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>React笔记 | 思无邪</title><meta name="keywords" content="React"><meta name="author" content="wu xie"><meta name="copyright" content="wu xie"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="&amp;#x5C1A;&amp;#x7845;&amp;#x8C37;&amp;#x5F20;&amp;#x5929;&amp;#x79B9;React&amp;#x5B66;&amp;#x4E60;&amp;#x7B14;&amp;#x8BB0;">
<meta property="og:type" content="article">
<meta property="og:title" content="React笔记">
<meta property="og:url" content="https://zqywuxie.github.io/2022/08/05/React/index.html">
<meta property="og:site_name" content="思无邪">
<meta property="og:description" content="&amp;#x5C1A;&amp;#x7845;&amp;#x8C37;&amp;#x5F20;&amp;#x5929;&amp;#x79B9;React&amp;#x5B66;&amp;#x4E60;&amp;#x7B14;&amp;#x8BB0;">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://raw.githubusercontent.com/jerryc127/CDN/master/cover/default_bg.png">
<meta property="article:published_time" content="2022-08-05T04:23:47.702Z">
<meta property="article:modified_time" content="2022-08-07T12:54:58.727Z">
<meta property="article:author" content="wu xie">
<meta property="article:tag" content="React">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://raw.githubusercontent.com/jerryc127/CDN/master/cover/default_bg.png"><link rel="shortcut icon" href="/img/cat.svg"><link rel="canonical" href="https://zqywuxie.github.io/2022/08/05/React/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: wu xie","link":"链接: ","source":"来源: 思无邪","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'React笔记',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-08-07 20:54:58'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const now = new Date()
          const hour = now.getHours()
          const isNight = hour <= 6 || hour >= 18
          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
          else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/rightMenu.css"><style>#article-container.post-content h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { -webkit-animation: avatar_turn_around 1s linear infinite; -moz-animation: avatar_turn_around 1s linear infinite; -o-animation: avatar_turn_around 1s linear infinite; -ms-animation: avatar_turn_around 1s linear infinite; animation: avatar_turn_around 1s linear infinite; }</style><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" ><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" ><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@1.0.17/lib/tag_plugins.css" media="defer" onload="this.media='all'"><script src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/carousel-touch.js"></script><!-- hexo injector head_end end --><meta name="generator" content="Hexo 6.2.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202208051055374.jpg" onerror="onerror=null;src='https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202208041745213.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">3</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">3</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">3</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首頁</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa-solid fa-book"></i><span> 文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-bars"></i><span> 其他</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/about/"><i class="fa-fw fa-fw fas fa-user"></i><span> 关于我</span></a></li><li><a class="site-page child" href="/otherTags/"><i class="fa-fw fa-solid fa-tags"></i><span> 外挂标签</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">思无邪</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首頁</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa-solid fa-book"></i><span> 文章</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-bars"></i><span> 其他</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/about/"><i class="fa-fw fa-fw fas fa-user"></i><span> 关于我</span></a></li><li><a class="site-page child" href="/otherTags/"><i class="fa-fw fa-solid fa-tags"></i><span> 外挂标签</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">React笔记</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-08-05T04:23:47.702Z" title="发表于 2022-08-05 12:23:47">2022-08-05</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-08-07T12:54:58.727Z" title="更新于 2022-08-07 20:54:58">2022-08-07</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">学习笔记</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">12.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>76分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="React笔记"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><article class="post-content" id="article-container"><h1 id="React"><a href="#React" class="headerlink" title="React"></a>React</h1><h2 id="1-&#x4ECB;&#x7ECD;"><a href="#1-&#x4ECB;&#x7ECD;" class="headerlink" title="1.&#x4ECB;&#x7ECD;"></a>1.&#x4ECB;&#x7ECD;</h2><p>&#x7528;&#x6237;&#x6784;&#x5EFA;&#x7528;&#x6237;<strong>&#x754C;&#x9762;</strong>&#x7684;JavaScript&#x5E93;&#x3002;&#x662F;&#x4E00;&#x4E2A;&#x5C06;&#x6570;&#x636E;&#x6E32;&#x67D3;&#x6210;HTML&#x89C6;&#x56FE;&#x7684;&#x5F00;&#x6E90;JavaScript&#x5E93;&#x3002;</p>
<h3 id="1-&#x539F;&#x751F;js&#x7684;&#x7F3A;&#x70B9;"><a href="#1-&#x539F;&#x751F;js&#x7684;&#x7F3A;&#x70B9;" class="headerlink" title="1.&#x539F;&#x751F;js&#x7684;&#x7F3A;&#x70B9;"></a>1.&#x539F;&#x751F;js&#x7684;&#x7F3A;&#x70B9;</h3><h3 id="2-React&#x7684;&#x7279;&#x70B9;"><a href="#2-React&#x7684;&#x7279;&#x70B9;" class="headerlink" title="2.React&#x7684;&#x7279;&#x70B9;"></a><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202206261600469.png" alt="image-20220625172447035">2.React&#x7684;&#x7279;&#x70B9;</h3><p><strong>&#x58F0;&#x660E;&#x5F0F;&#x7F16;&#x7801;:&#x5F3A;&#x8C03;&#x76EE;&#x7684; &#x547D;&#x4EE4;&#x65F6;&#x7F16;&#x7801;:&#x5F3A;&#x8C03;&#x8FC7;&#x7A0B;</strong></p>
<ul>
<li>&#x91C7;&#x7528;&#x7EC4;&#x4EF6;&#x5316;&#x6A21;&#x5F0F;&#xFF0C;&#x58F0;&#x660E;&#x5F0F;&#x7F16;&#x7801;&#xFF0C;&#x63D0;&#x9AD8;&#x5F00;&#x53D1;&#x6548;&#x7387;&#x548C;&#x7EC4;&#x4EF6;&#x590D;&#x7528;&#x6027;</li>
<li>&#x5728;React Native&#x4E2D;&#x53EF;&#x4EE5;&#x7528;react&#x9884;&#x53D1;&#x8FDB;&#x884C;&#x5B89;&#x5353;&#x3001;ios&#x79FB;&#x52A8;&#x7AEF;&#x5F00;&#x53D1;</li>
<li>&#x4F7F;&#x7528;&#x865A;&#x62DF;dom&#x548C;&#x6709;&#x4E9B;&#x7684;diffing&#x7B97;&#x6CD5;&#xFF0C;&#x5C3D;&#x91CF;&#x51CF;&#x5C11;&#x4E0E;&#x771F;&#x5B9E;dom&#x7684;&#x4EA4;&#x4E92;&#xFF0C;&#x63D0;&#x9AD8;&#x6027;&#x80FD;</li>
</ul>
<h3 id="3-&#x865A;&#x62DF;DOM&#x7684;&#x521B;&#x5EFA;&#x65B9;&#x5F0F;"><a href="#3-&#x865A;&#x62DF;DOM&#x7684;&#x521B;&#x5EFA;&#x65B9;&#x5F0F;" class="headerlink" title="3.&#x865A;&#x62DF;DOM&#x7684;&#x521B;&#x5EFA;&#x65B9;&#x5F0F;"></a>3.&#x865A;&#x62DF;DOM&#x7684;&#x521B;&#x5EFA;&#x65B9;&#x5F0F;</h3><h4 id="1-&#x4F7F;&#x7528;jsx&#x8BED;&#x6CD5;"><a href="#1-&#x4F7F;&#x7528;jsx&#x8BED;&#x6CD5;" class="headerlink" title="1.&#x4F7F;&#x7528;jsx&#x8BED;&#x6CD5;"></a>1.&#x4F7F;&#x7528;jsx&#x8BED;&#x6CD5;</h4><p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202206261551900.png" alt="img"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">    <span class="keyword">const</span> <span class="variable constant_">VDOM</span>=<span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello React<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">     <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="variable constant_">VDOM</span>,<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&apos;test&apos;</span>))</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h4 id="2-&#x539F;&#x751F;js&#x8BED;&#x6CD5;"><a href="#2-&#x539F;&#x751F;js&#x8BED;&#x6CD5;" class="headerlink" title="2.&#x539F;&#x751F;js&#x8BED;&#x6CD5;"></a>2.&#x539F;&#x751F;js&#x8BED;&#x6CD5;</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">    <span class="keyword">const</span> <span class="variable constant_">VDOM</span>=<span class="title class_">React</span>.<span class="title function_">creatElement</span>(<span class="string">&apos;h1&apos;</span>,{<span class="attr">id</span>:<span class="string">&apos;title&apos;</span>},<span class="string">&apos;Hello React&apos;</span>) ;</span><br><span class="line">     <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="variable constant_">VDOM</span>,<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&apos;test&apos;</span>))</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>babel&#x5C06;jsx&#x8F6C;&#x6362;&#x4E3A;&#x539F;&#x751F;js</li>
</ul>
<h4 id="3-&#x6BD4;&#x8F83;"><a href="#3-&#x6BD4;&#x8F83;" class="headerlink" title="3.&#x6BD4;&#x8F83;"></a>3.&#x6BD4;&#x8F83;</h4><p>&#x5173;&#x4E8E;&#x865A;&#x62DF;DOM&#xFF1A;</p>
<ol>
<li>&#x672C;&#x8D28;&#x662F;object&#x7C7B;&#x578B;&#x7684;&#x5BF9;&#x8C61;</li>
<li>&#x865A;&#x62DF;DOM&#x6BD4;&#x8F83;&#x2019;&#x8F7B;&#x2019;&#xFF0C;&#x6240;&#x542B;&#x5185;&#x5BB9;&#x8F83;&#x5C11;&#x3002;&#x56E0;&#x4E3A;&#x865A;&#x62DF;DOM&#x662F;React&#x5185;&#x90E8;&#x5728;&#x7528;&#xFF0C;&#x65E0;&#x9700;&#x771F;&#x5B9E;DOM&#x4E0A;&#x90A3;&#x4E48;&#x591A;&#x7684;&#x5C5E;&#x6027;&#x3002;</li>
<li>&#x865A;&#x62DF;DOM&#x6700;&#x7EC8;&#x4F1A;&#x88AB;React&#x8F6C;&#x6362;&#x4E3A;&#x771F;&#x5B9E;DOM&#xFF0C;&#x5448;&#x73B0;&#x5728;&#x9875;&#x9762;&#x4E0A;</li>
</ol>
<h3 id="4-JSX"><a href="#4-JSX" class="headerlink" title="4.JSX"></a>4.JSX</h3><h4 id="1-&#x4ECB;&#x7ECD;-1"><a href="#1-&#x4ECB;&#x7ECD;-1" class="headerlink" title="1.&#x4ECB;&#x7ECD;"></a>1.&#x4ECB;&#x7ECD;</h4><p>JSX&#x662F;JavaScriptXML&#x662F;JavaScript&#x548C;XML&#x9965;&#x997F;&#x548C;&#x7684;&#x683C;&#x5F0F;&#x3002;&#x662F;JavaScript&#x7684;&#x62D3;&#x5C55;</p>
<h4 id="2-&#x8BED;&#x6CD5;&#x89C4;&#x5219;"><a href="#2-&#x8BED;&#x6CD5;&#x89C4;&#x5219;" class="headerlink" title="2.&#x8BED;&#x6CD5;&#x89C4;&#x5219;"></a>2.&#x8BED;&#x6CD5;&#x89C4;&#x5219;</h4><ul>
<li>&#x5B9A;&#x4E49;&#x865A;&#x62DF;dom&#x65F6;&#x4E0D;&#x8981;&#x7528;&#x5F15;&#x53F7;</li>
<li>&#x6807;&#x7B7E;&#x4E2D;&#x5F15;&#x5165;js&#x8868;&#x8FBE;&#x5F0F;&#x8981;&#x7528;{}</li>
</ul>
<p>&#x533A;&#x5206;&#x8868;&#x8FBE;&#x5F0F;&#x548C;&#x8BED;&#x53E5;<br>1.&#x8868;&#x8FBE;&#x5F0F;:&#x4E00;&#x4E2A;<strong>&#x8868;&#x8FBE;&#x5F0F;&#x4F1A;&#x4EA7;&#x751F;&#x4E00;&#x4E2A;&#x503C;</strong>&#xFF0C;&#x53EF;&#x4EE5;&#x653E;&#x5728;&#x4EFB;&#x4F55;&#x4E00;&#x4E2A;&#x9700;&#x8981;&#x503C;&#x7684;&#x5730;&#x65B9;</p>
<ul>
<li>&#x5982;&#x679C;&#x5728;jsx&#x8981;&#x5199;&#x884C;&#x5185;&#x6837;&#x5F0F;&#x9700;&#x8981;&#x4F7F;&#x7528;style=&#x5F62;&#x5F0F;<br>&#x6837;&#x5F0F;&#x7684;&#x7C7B;&#x540D;&#x6307;&#x5B9A;&#x4E0D;&#x80FD;&#x5199;class&#xFF0C;&#x8981;&#x5199;className;</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;h2 className=<span class="string">&quot;123&quot;</span>&gt;</span><br><span class="line">	<span class="language-xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">{{color:</span>&apos;<span class="attr">white</span>&apos;}}&gt;</span><span class="tag">&lt;/<span class="name">spam</span>&gt;</span></span>    </span><br><span class="line">&lt;/h2&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>&#x53EA;&#x6709;<strong>&#x4E00;&#x4E2A;&#x6839;&#x6807;&#x7B7E;</strong></li>
<li>&#x6807;&#x7B7E;&#x5FC5;&#x987B;&#x95ED;&#x5408;</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">&quot;text/&gt;&#x81EA;&#x95ED;&#x5408;</span></span><br><span class="line"><span class="string">&lt;input type=&quot;</span>teext<span class="string">&quot;&gt;&lt;/input&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>&#x6807;&#x7B7E;&#x9996;&#x5B57;&#x6BCD;<br>&#x2460;&#x82E5;&#x5C0F;&#x5199;&#x5B57;&#x6BCD;&#x5F00;&#x5934;&#xFF0C;&#x5219;&#x4F1A;&#x5C06;&#x8BE5;&#x6807;&#x7B7E;&#x8F6C;&#x4E3A;html&#x540C;&#x540D;&#x6807;&#x7B7E;&#xFF0C;&#x5982;&#x679C;&#x6CA1;&#x627E;&#x5230;&#xFF0C;&#x5219;&#x4F1A;&#x62A5;&#x9519;&#xFF1B;<br>&#x2461;&#x82E5;&#x5927;&#x5199;&#x5B57;&#x6BCD;&#x5F00;&#x5934;&#xFF0C;&#x5219;&#x4F1A;&#x8BA4;&#x4E3A;&#x662F;&#x7EC4;&#x4EF6;&#xFF0C;&#x5B83;&#x5C31;&#x4F1A;&#x53BB;&#x627E;&#x5BF9;&#x5E94;&#x7684;&#x7EC4;&#x4EF6;&#xFF0C;&#x5982;&#x679C;&#x6CA1;&#x627E;&#x5230;&#xFF0C;&#x5C31;&#x4F1A;&#x62A5;&#x7EC4;&#x4EF6;&#x672A;&#x5B9A;&#x4E49;&#x7684;&#x9519;&#x8BEF;&#xFF1B;</li>
</ul>
<h3 id="5-&#x6A21;&#x5757;&#x548C;&#x7EC4;&#x4EF6;&#xFF0C;&#x6A21;&#x5757;&#x5316;&#x548C;&#x7EC4;&#x4EF6;&#x5316;"><a href="#5-&#x6A21;&#x5757;&#x548C;&#x7EC4;&#x4EF6;&#xFF0C;&#x6A21;&#x5757;&#x5316;&#x548C;&#x7EC4;&#x4EF6;&#x5316;" class="headerlink" title="5.&#x6A21;&#x5757;&#x548C;&#x7EC4;&#x4EF6;&#xFF0C;&#x6A21;&#x5757;&#x5316;&#x548C;&#x7EC4;&#x4EF6;&#x5316;"></a>5.&#x6A21;&#x5757;&#x548C;&#x7EC4;&#x4EF6;&#xFF0C;&#x6A21;&#x5757;&#x5316;&#x548C;&#x7EC4;&#x4EF6;&#x5316;</h3><p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207022057364.png" alt="image-20220702205732079"></p>
<h2 id="2-&#x9762;&#x5411;&#x7EC4;&#x4EF6;&#x7F16;&#x7A0B;"><a href="#2-&#x9762;&#x5411;&#x7EC4;&#x4EF6;&#x7F16;&#x7A0B;" class="headerlink" title="2.&#x9762;&#x5411;&#x7EC4;&#x4EF6;&#x7F16;&#x7A0B;"></a>2.&#x9762;&#x5411;&#x7EC4;&#x4EF6;&#x7F16;&#x7A0B;</h2><h3 id="1-&#x51FD;&#x6570;&#x5F0F;&#x548C;&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;"><a href="#1-&#x51FD;&#x6570;&#x5F0F;&#x548C;&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;" class="headerlink" title="1.&#x51FD;&#x6570;&#x5F0F;&#x548C;&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;"></a>1.&#x51FD;&#x6570;&#x5F0F;&#x548C;&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;</h3><ul>
<li><strong>&#x51FD;&#x6570;&#x5F0F;&#xFF08;&#x9002;&#x4E8E;&#x7B80;&#x5355;&#x7EC4;&#x4EF6;)</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">    &lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">      <span class="keyword">function</span> <span class="title function_">Demo</span>(<span class="params"></span>) {</span><br><span class="line">        <span class="keyword">return</span> <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>&#x6211;&#x662F;&#x51FD;&#x6570;&#x5B9A;&#x4E49;&#x7684;&#x7EC4;&#x4EF6;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span>;</span><br><span class="line">        consolo.<span class="title function_">log</span>(<span class="variable language_">this</span>)<span class="comment">//&#x6B64;&#x5904;&#x7684;this&#x662F;undefined&#xFF0C;&#x4EE5;&#x4E3A;babel&#x7F16;&#x8BD1;&#x540E;&#x5F00;&#x542F;&#x4E86;&#x4E25;&#x683C;&#x6A21;&#x5F0F;</span></span><br><span class="line">      } <span class="comment">// &#x6E32;&#x67D3;</span></span><br><span class="line">      <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> /&gt;</span></span>, <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&#x6267;&#x884C;       <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> /&gt;</span></span>...&#x540E;</span><br><span class="line">       <span class="number">1.</span><span class="title class_">React</span>&#x89E3;&#x6790;&#x7EC4;&#x4EF6;&#x6807;&#x7B7E;&#xFF0C;&#x627E;&#x5230;&#x4E86;<span class="title class_">Demo</span>&#x7EC4;&#x4EF6;</span><br><span class="line">      <span class="number">2.</span>&#x53D1;&#x73B0;&#x7EC4;&#x4EF6;&#x662F;&#x4F7F;&#x7528;&#x51FD;&#x6570;&#x5B9A;&#x4E49;&#x7684;&#xFF0C;&#x968F;&#x540E;&#x8C03;&#x7528;&#x8BE5;&#x51FD;&#x6570;&#xFF0C;&#x5C06;&#x8FD4;&#x56DE;&#x7684;&#x865A;&#x62DF;<span class="variable constant_">DO</span>&#x6CA1;&#x8F6C;&#x4E3A;&#x771F;&#x5B9E;<span class="variable constant_">DOM</span>&#xFF0C;&#x968F;&#x540E;&#x5448;&#x73B0;&#x5728;&#x9875;&#x9762;&#x4E2D;</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>&#x7C7B;&#x5F0F;(&#x590D;&#x6742;&#x7EC4;&#x4EF6;)</strong></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">    &lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">      <span class="comment">// 1.&#x521B;&#x5EFA;&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;,&#x9700;&#x8981;&#x7EE7;&#x627F;&#x4E00;&#x4E2A;React&#x5185;&#x7F6E;&#x7C7B;</span></span><br><span class="line">      <span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line">        <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">            <span class="comment">//  render&#x653E;&#x5728;&#x7C7B;&#x7684;&#x539F;&#x578B;&#x5BF9;&#x8C61;&#x4E0A;&#xFF0C;&#x4F9B;&#x5B9E;&#x4F8B;&#x4F7F;&#x7528;</span></span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">            <span class="comment">// this&#x662F;Demo&#x7684;&#x5B9E;&#x4F8B;&#x5BF9;&#x8C61;==Demo&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x5BF9;&#x8C61;</span></span><br><span class="line">          <span class="keyword">return</span> <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>Hello React<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>;</span><br><span class="line"></span><br><span class="line">        }</span><br><span class="line">      }</span><br><span class="line">    <span class="comment">//   2.&#x6E32;&#x67D3;&#x7EC4;&#x4EF6;&#x5230;&#x9875;&#x9762;</span></span><br><span class="line">    <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span>/&gt;</span></span>,<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&apos;test&apos;</span>))</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">      &#x6267;&#x884C;&#x540E;</span></span><br><span class="line"><span class="comment">      1.React&#x89E3;&#x6790;&#x7EC4;&#x4EF6;&#x6807;&#x7B7E;&#xFF0C;&#x627E;&#x5230;&#x4E86;Demo&#x7EC4;&#x4EF6;</span></span><br><span class="line"><span class="comment">      2.&#x53D1;&#x73B0;&#x7EC4;&#x4EF6;&#x662F;&#x7C7B;&#x5B9A;&#x4E49;&#x7684;&#xFF0C;&#x7136;&#x540E;new&#x51FA;&#x6765;&#x8BE5;&#x7C7B;&#x7684;&#x5B9E;&#x4F8B;&#xFF0C;&#x5E76;&#x901A;&#x8FC7;&#x5B9E;&#x4F8B;&#x8C03;&#x7528;&#x5230;&#x539F;&#x578B;&#x4E0A;&#x7684;render&#x65B9;&#x6CD5;</span></span><br><span class="line"><span class="comment">      3.&#x5C06;render&#x8FD4;&#x56DE;&#x7684;&#x865A;&#x62DF;DOM&#x8F6C;&#x4E3A;&#x771F;&#x5B9E;DOM&#xFF0C;&#x968F;&#x540E;&#x5448;&#x73B0;&#x5728;&#x9875;&#x9762;&#x4E2D;</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">    &lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202206281645380.png" alt="image-20220628164535311"></p>
<h3 id="2-&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x7684;&#x4E09;&#x5927;&#x6838;&#x5FC3;&#x5C5E;&#x6027;"><a href="#2-&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x7684;&#x4E09;&#x5927;&#x6838;&#x5FC3;&#x5C5E;&#x6027;" class="headerlink" title="2.&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x7684;&#x4E09;&#x5927;&#x6838;&#x5FC3;&#x5C5E;&#x6027;"></a>2.&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x7684;&#x4E09;&#x5927;&#x6838;&#x5FC3;&#x5C5E;&#x6027;</h3><p>&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;&#x624D;&#x6709;&#x5B9E;&#x4F8B;</p>
<h4 id="1-state-&#x5B9E;&#x4F8B;&#x72B6;&#x6001;"><a href="#1-state-&#x5B9E;&#x4F8B;&#x72B6;&#x6001;" class="headerlink" title="1.state &#x5B9E;&#x4F8B;&#x72B6;&#x6001;"></a>1.state &#x5B9E;&#x4F8B;&#x72B6;&#x6001;</h4><p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202206291123584.jpg" alt="&#x5C4F;&#x5E55;&#x622A;&#x56FE; 2022-06-29 112302"> </p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">  <span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line">    <span class="comment">// &#x6784;&#x9020;&#x5668;&#x53EA;&#x6267;&#x884C;&#x4E86;&#x4E00;&#x6B21;</span></span><br><span class="line">    <span class="title function_">constructor</span>(<span class="params">props</span>) {</span><br><span class="line">      <span class="variable language_">super</span>(props);</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">state</span> = { <span class="attr">isHot</span>: <span class="literal">true</span>,<span class="attr">wind</span>:<span class="string">&apos;&#x5FAE;&#x98CE;&apos;</span> }</span><br><span class="line">      <span class="comment">// &#x89E3;&#x51B3;zqy&#x65B9;&#x6CD5;&#x7684;this&#x6307;&#x5411;&#x95EE;&#x9898;</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">zqy</span> = <span class="variable language_">this</span>.<span class="property">zqy</span>.<span class="title function_">bind</span>(<span class="variable language_">this</span>)</span><br><span class="line">    }</span><br><span class="line">    <span class="comment">// render&#x8C03;&#x7528;&#x51E0;&#x6B21;&#xFF1F;--&gt;1+n&#x6B21;&#xFF0C;1&#x662F;&#x521D;&#x59CB;&#x5316;&#x7684;&#x90A3;&#x6B21;&#xFF0C;n&#x662F;&#x72B6;&#x6001;&#x66F4;&#x65B0;&#x7684;&#x6B21;&#x6570;</span></span><br><span class="line">    <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">      <span class="keyword">const</span> {isHot,wind} = <span class="variable language_">this</span>.<span class="property">state</span>;</span><br><span class="line">      <span class="comment">//&#x8FD9;&#x91CC;&#x7684;zqy&#x65B9;&#x6CD5;&#x4E0D;&#x662F;&#x5B9E;&#x4F8B;&#x8C03;&#x7528;</span></span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">onClick</span>=<span class="string">{this.zqy}</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          &#x4ECA;&#x5929;&#x5929;&#x6C14;&#x5F88;{isHot ? &quot;&#x708E;&#x70ED;&quot; : &quot;&#x51C9;&#x723D;&quot;},{wind}</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">      );</span><br><span class="line">    }</span><br><span class="line">    <span class="comment">//zqy&#x8C03;&#x7528;&#x51E0;&#x6B21;&#xFF0C;--&gt;&#x4F7F;&#x7528;&#x51E0;&#x6B21;&#x8C03;&#x7528;&#x51E0;&#x6B21;</span></span><br><span class="line">    <span class="title function_">zqy</span>(<span class="params"></span>) {</span><br><span class="line">      <span class="comment">// &#x653E;&#x5728;&#x7C7B;&#x5916;&#x9762;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x8FD9;&#x91CC;&#x7684;this&#x662F;Window&#x4E0D;&#x662F;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;</span></span><br><span class="line">      <span class="comment">// zqy&#x653E;&#x5728;Demo&#x7684;&#x539F;&#x578B;&#x5BF9;&#x8C61;&#x4E0A;&#xFF0C;&#x4F9B;&#x5B9E;&#x4F8B;&#x4F7F;&#x7528;</span></span><br><span class="line">      <span class="comment">// &#x7531;&#x4E8E;zqy&#x662F;&#x4F5C;&#x4E3A;onClick&#x7684;&#x56DE;&#x8C03;&#xFF0C;&#x4E0D;&#x662F;&#x901A;&#x8FC7;&#x5B9E;&#x4F8B;&#x8C03;&#x7528;&#xFF0C;&#x800C;&#x662F;&#x76F4;&#x63A5;&#x8C03;&#x7528;</span></span><br><span class="line">      <span class="comment">// &#x7C7B;&#x4E2D;&#x7684;&#x65B9;&#x6CD5;&#x9ED8;&#x8BA4;&#x5F00;&#x542F;&#x4E86;&#x5C40;&#x90E8;&#x7684;&#x4E25;&#x683C;&#x6A21;&#x5F0F;&#xFF0C;&#x6240;&#x4EE5;&#x8FD9;&#x91CC;&#x7684;this&#x662F;undefined</span></span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> isHot = <span class="variable language_">this</span>.<span class="property">state</span>.<span class="property">isHot</span></span><br><span class="line">      <span class="comment">// &#x66F4;&#x65B0;&#x662F;&#x5408;&#x5E76;&#xFF0C;&#x4E0D;&#x662F;&#x76F4;&#x63A5;&#x66FF;&#x6362;&#xFF0C;&#x6CA1;&#x6709;&#x66F4;&#x65B0;&#x4E0D;&#x4F1A;&#x88AB;&#x8986;&#x76D6;</span></span><br><span class="line">      <span class="variable language_">this</span>.<span class="title function_">setState</span>({<span class="attr">isHot</span>:!isHot})</span><br><span class="line">      <span class="comment">// &#x72B6;&#x6001;&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x66F4;&#x6539;,&#x5982;&#x4E0B;&#x884C;</span></span><br><span class="line">      <span class="comment">// this.state.isHot = !isHot;</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">//undefined</span></span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">zqy</span>(<span class="params"></span>) {</span><br><span class="line">    <span class="comment">// &#x653E;&#x5728;&#x7C7B;&#x5916;&#x9762;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x8FD9;&#x91CC;&#x7684;this&#x662F;Window&#x4E0D;&#x662F;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">//window</span></span><br><span class="line">  }</span><br><span class="line">  <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> /&gt;</span></span>, <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="1-2&#x4FEE;&#x6539;"><a href="#1-2&#x4FEE;&#x6539;" class="headerlink" title="1.2&#x4FEE;&#x6539;"></a>1.2&#x4FEE;&#x6539;</h5><p><strong>&#x72B6;&#x6001;&#x6570;&#x636E;&#xFF0C;&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x4FEE;&#x6539;&#x6216;&#x66F4;&#x65B0;</strong></p>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202206291202803.png" alt="image-20220629120247765"></p>
<h5 id="1-3&#x7B80;&#x5199;"><a href="#1-3&#x7B80;&#x5199;" class="headerlink" title="1.3&#x7B80;&#x5199;"></a>1.3&#x7B80;&#x5199;</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">  <span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line">    <span class="comment">// &#x521D;&#x59CB;&#x5316;&#x72B6;&#x6001;</span></span><br><span class="line">    state = { <span class="attr">isHot</span>: <span class="literal">true</span>,<span class="attr">wind</span>:<span class="string">&apos;&#x5FAE;&#x98CE;&apos;</span> }</span><br><span class="line">    <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">      <span class="keyword">const</span> {isHot,wind} = <span class="variable language_">this</span>.<span class="property">state</span>;</span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">onClick</span>=<span class="string">{this.zqy}</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          &#x4ECA;&#x5929;&#x5929;&#x6C14;&#x5F88;{isHot ? &quot;&#x708E;&#x70ED;&quot; : &quot;&#x51C9;&#x723D;&quot;},{wind}</span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">      );</span><br><span class="line">    }</span><br><span class="line">    <span class="comment">// &#x81EA;&#x5B9A;&#x4E49;&#x65B9;&#x6CD5;--&gt;&#x8981;&#x7528;&#x8D4B;&#x503C;&#x8BED;&#x53E5;&#x7684;&#x5F62;&#x5F0F;&#xFF0B;&#x7BAD;&#x5934;&#x51FD;&#x6570;</span></span><br><span class="line">    zqy=<span class="function">()=&gt;</span> {</span><br><span class="line">      <span class="keyword">const</span> isHot = <span class="variable language_">this</span>.<span class="property">state</span>.<span class="property">isHot</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">      <span class="variable language_">this</span>.<span class="title function_">setState</span>({<span class="attr">isHot</span>:!isHot})</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">  <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> /&gt;</span></span>, <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p><strong>&#x56E0;&#x4E3A;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x4E2D; this &#x7684;&#x503C;&#x662F;&#x7EE7;&#x627F;&#x81EA; &#x5916;&#x56F4;&#x4F5C;&#x7528;&#x57DF;</strong></p>
<h5 id="1-4state&#x603B;&#x7ED3;"><a href="#1-4state&#x603B;&#x7ED3;" class="headerlink" title="1.4state&#x603B;&#x7ED3;"></a>1.4state&#x603B;&#x7ED3;</h5><p>\1.   &#x7EC4;&#x4EF6;&#x4E2D;render&#x65B9;&#x6CD5;&#x4E2D;&#x7684;this&#x4E3A;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x5BF9;&#x8C61;</p>
<p>\2.   &#x7EC4;&#x4EF6;&#x81EA;&#x5B9A;&#x4E49;&#x7684;&#x65B9;&#x6CD5;&#x4E2D;this&#x4E3A;undefined&#xFF0C;&#x5982;&#x4F55;&#x89E3;&#x51B3;&#xFF1F;</p>
<p>a)   &#x5F3A;&#x5236;&#x7ED1;&#x5B9A;this: &#x901A;&#x8FC7;&#x51FD;&#x6570;&#x5BF9;&#x8C61;&#x7684;bind()</p>
<p>b)   &#x7BAD;&#x5934;&#x51FD;&#x6570;</p>
<p>\3.   &#x72B6;&#x6001;&#x6570;&#x636E;&#xFF0C;&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x4FEE;&#x6539;&#x6216;&#x66F4;&#x65B0;</p>
<h4 id="2-props-&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x5C5E;&#x6027;"><a href="#2-props-&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x5C5E;&#x6027;" class="headerlink" title="2.props &#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x5C5E;&#x6027;"></a>2.props &#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x5C5E;&#x6027;</h4><p>\1.   &#x6BCF;&#x4E2A;&#x7EC4;&#x4EF6;&#x5BF9;&#x8C61;&#x90FD;&#x4F1A;&#x6709;props(properties&#x7684;&#x7B80;&#x5199;)&#x5C5E;&#x6027;&#xFF0C;&#x4ECE;&#x5B9E;&#x4F8B;&#x5BF9;&#x8C61;&#x5916;&#x90E8;&#x4F20;&#x5165;&#xFF0C;&#x800C;&#x4E0D;&#x662F;state&#x4E00;&#x6837;&#x7684;&#x5185;&#x90E8;</p>
<p>\2.   &#x7EC4;&#x4EF6;&#x6807;&#x7B7E;&#x7684;&#x6240;&#x6709;&#x5C5E;&#x6027;&#x90FD;&#x4FDD;&#x5B58;&#x5728;props&#x4E2D;</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">  <span class="comment">// 1.&#x521B;&#x5EFA;&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;,&#x9700;&#x8981;&#x7EE7;&#x627F;&#x4E00;&#x4E2A;React&#x5185;&#x7F6E;&#x7C7B;</span></span><br><span class="line">  <span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line">    state = { <span class="attr">name</span>: <span class="string">&quot;zqy&quot;</span>, <span class="attr">age</span>: <span class="number">18</span>, <span class="attr">sex</span>: <span class="string">&quot;girl&quot;</span> };</span><br><span class="line">    <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">      <span class="keyword">const</span> { name, age, sex } = <span class="variable language_">this</span>.<span class="property">props</span>;</span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x59D3;&#x540D;:{name} <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x6027;&#x522B;:{sex}<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x5E74;&#x9F84;:{age} <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line">      );</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">  <span class="comment">//   2.&#x6E32;&#x67D3;&#x7EC4;&#x4EF6;&#x5230;&#x9875;&#x9762;</span></span><br><span class="line">  <span class="keyword">const</span> p = { <span class="attr">name</span>: <span class="string">&quot;zqy&quot;</span>, <span class="attr">sex</span>: <span class="string">&quot;&#x5973;&quot;</span>, <span class="attr">age</span>: <span class="number">19</span> };</span><br><span class="line">  <span class="comment">//   &#x8FD9;&#x662F;&#x6279;&#x91CF;&#x4F20;&#x5165;&#x5185;&#x5BB9;&#xFF0C;&#x9700;&#x8981;&#x5BF9;&#x8C61;&#x91CC;&#x9762;&#x7684;&#x5C5E;&#x6027;&#x540D;&#x76F8;&#x5BF9;&#x5E94;;&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;</span></span><br><span class="line">  <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> {<span class="attr">...p</span>} /&gt;</span></span>, <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h5 id="2-1&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;"><a href="#2-1&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;" class="headerlink" title="2.1&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;"></a>2.1&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">    &lt;script&gt;</span><br><span class="line">        <span class="comment">// &#x6570;&#x7EC4;&#x4E2D;&#x4F7F;&#x7528;</span></span><br><span class="line">      <span class="keyword">let</span> arr1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(arr1); <span class="comment">//&#x8F93;&#x51FA;&#x6570;&#x7EC4;&#x5BF9;&#x8C61;</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(...arr1); <span class="comment">//&#x4F9D;&#x6B21;&#x8F93;&#x51FA;&#x6570;&#x7EC4;&#x5185;&#x7684;&#x5143;&#x7D20;</span></span><br><span class="line">      <span class="keyword">let</span> arr2 = [<span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line">      <span class="keyword">let</span> arr3 = [...arr1, ...arr2]; <span class="comment">//&#x5408;&#x5E76;&#x6570;&#x7EC4;</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(arr3);</span><br><span class="line"></span><br><span class="line">    <span class="comment">//   &#x5728;&#x51FD;&#x6570;&#x4E2D;&#x4F7F;&#x7528;</span></span><br><span class="line">      <span class="keyword">function</span> <span class="title function_">sum</span>(<span class="params">...number</span>) {</span><br><span class="line">        <span class="comment">// reduce &#x8BA1;&#x7B97;&#x6570;&#x7EC4;&#x603B;&#x548C;</span></span><br><span class="line">        <span class="keyword">return</span> number.<span class="title function_">reduce</span>(<span class="function">(<span class="params">preValue, currentValue</span>) =&gt;</span> {</span><br><span class="line">          <span class="keyword">return</span> preValue + currentValue;</span><br><span class="line">        });</span><br><span class="line">      }</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">sum</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>));<span class="comment">//10</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// &#x6784;&#x9020;&#x5B57;&#x9762;&#x91CF;&#x5BF9;&#x8C61;&#x65F6;&#x4F7F;&#x7528;</span></span><br><span class="line">      <span class="keyword">let</span> person={<span class="attr">name</span>:<span class="string">&apos;zqy&apos;</span>,<span class="attr">age</span>:<span class="number">18</span>}</span><br><span class="line">    <span class="comment">//   console.log(...person);//&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;&#x4E0D;&#x80FD;&#x5C55;&#x5F00;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;</span></span><br><span class="line"></span><br><span class="line">      <span class="keyword">let</span> person2={...person}<span class="comment">//&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;&#x53EF;&#x4EE5;&#x590D;&#x5236;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x6DF1;&#x5EA6;&#x62F7;&#x8D1D;</span></span><br><span class="line">      <span class="keyword">let</span> person2=person <span class="comment">//&#x590D;&#x5236;&#x5BF9;&#x8C61; &#x800C;&#x4E0D;&#x662F;&#x62F7;&#x8D1D;</span></span><br><span class="line">      person.<span class="property">name</span>=<span class="string">&apos;jwj&apos;</span><span class="comment">//person2&#x4E0D;&#x6539;&#x53D8;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//   &#x5408;&#x5E76;&#x5BF9;&#x8C61;</span></span><br><span class="line">    <span class="keyword">let</span> person3={...person,<span class="attr">name</span>:<span class="string">&apos;jwj&apos;</span>,<span class="attr">id</span>:<span class="string">&apos;wo&apos;</span>}<span class="comment">//&#x540C;&#x540D;&#x5C5E;&#x6027;&#x8FDB;&#x884C;&#x4FEE;&#x6539;</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(person3);</span><br><span class="line">    &lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p><strong>babel+React</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>({...p});<span class="comment">//babel+react&#x4E2D;&#x7684;&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;&#x5C55;&#x5F00;&#x5BF9;&#x8C61;&#x53EA;&#x9002;&#x4E8E;&#x6807;&#x7B7E;&#x5185;&#xFF0C;&#x6240;&#x4EE5;&#x6B64;&#x5904;&#x65E0;&#x663E;&#x793A;</span></span><br><span class="line">  <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> {<span class="attr">...p</span>} /&gt;</span></span>, <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span><br></pre></td></tr></table></figure>
<h5 id="2-2props&#x9650;&#x5236;"><a href="#2-2props&#x9650;&#x5236;" class="headerlink" title="2.2props&#x9650;&#x5236;"></a>2.2props&#x9650;&#x5236;</h5><ol>
<li>&#x67D0;&#x4E00;&#x5C5E;&#x6027;&#x586B;&#x5199;&#x7684;&#x9650;&#x5236;</li>
<li>&#x67D0;&#x4E00;&#x5C5E;&#x6027;&#x7C7B;&#x578B;&#x7684;&#x9650;&#x5236;</li>
<li>&#x67D0;&#x4E00;&#x5C5E;&#x6027;&#x9ED8;&#x8BA4;&#x503C;</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span> src=<span class="string">&quot;../JS/prop-types.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line">&lt;!-- &#x7528;&#x4E8E;&#x5BF9;&#x7EC4;&#x4EF6;&#x6807;&#x7B7E;&#x5C5E;&#x6027;&#x8FDB;&#x884C;&#x9650;&#x5236; --&gt;<span class="comment">//&#x4F1A;&#x51FA;&#x73B0;&#x4E00;&#x4E2A;ProTypes&#x5BF9;&#x8C61;</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/babel&quot;</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">// 1.&#x521B;&#x5EFA;&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;,&#x9700;&#x8981;&#x7EE7;&#x627F;&#x4E00;&#x4E2A;React&#x5185;&#x7F6E;&#x7C7B;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">render</span>(<span class="params"></span>) {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">const</span> { name, age, sex } = <span class="variable language_">this</span>.<span class="property">props</span>;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">return</span> (</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="language-xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span></span></span><br><span class="line"><span class="language-xml"><span class="language-javascript"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x59D3;&#x540D;:{name} <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span></span></span><br><span class="line"><span class="language-xml"><span class="language-javascript"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x6027;&#x522B;:{sex}<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span></span></span><br><span class="line"><span class="language-xml"><span class="language-javascript"><span class="language-xml">          <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x5E74;&#x9F84;:{age + 1} <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span></span></span><br><span class="line"><span class="language-xml"><span class="language-javascript"><span class="language-xml">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      );</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">//   &#x5BF9;&#x6807;&#x7B7E;&#x5C5E;&#x6027;&#x8FDB;&#x884C;&#x7C7B;&#x578B;&#xFF0C;&#x5FC5;&#x8981;&#x6027;&#x7684;&#x9650;&#x5236;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title class_">Demo</span>.<span class="property">propTypes</span>={</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">name</span>:<span class="title class_">PropTypes</span>.<span class="property">string</span>.<span class="property">isRequired</span>,<span class="comment">//&#x9650;&#x5236;name&#x662F;&#x5B57;&#x7B26;&#x4E32;&#x4E14;&#x5FC5;&#x586B;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">sex</span>:<span class="title class_">PropTypes</span>.<span class="property">string</span>,<span class="comment">//&#x9650;&#x5236;&#x6027;&#x522B;&#x4E3A;&#x5B57;&#x7B26;&#x4E32;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">speak</span>:<span class="title class_">PropTypes</span>.<span class="property">func</span><span class="comment">//&#x9650;&#x5236;&#x51FD;&#x6570;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title class_">Demo</span>.<span class="property">defaultProps</span>={</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">sex</span>:<span class="string">&apos;&#x4E0D;&#x7537;&#x4E0D;&#x5973;&apos;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">age</span>:<span class="number">18</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   2.&#x6E32;&#x67D3;&#x7EC4;&#x4EF6;&#x5230;&#x9875;&#x9762;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">const</span> p = { <span class="attr">name</span>: <span class="string">&apos;zqy&apos;</span>, <span class="attr">sex</span>: <span class="string">&quot;&#x5973;&quot;</span>, <span class="attr">age</span>: <span class="number">19</span> };</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">//   &#x8FD9;&#x662F;&#x6279;&#x91CF;&#x4F20;&#x5165;&#x5185;&#x5BB9;&#xFF0C;&#x9700;&#x8981;&#x5BF9;&#x8C61;&#x91CC;&#x9762;&#x7684;&#x5C5E;&#x6027;&#x540D;&#x76F8;&#x5BF9;&#x5E94;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="variable language_">console</span>.<span class="title function_">log</span>({ ...p }); <span class="comment">//babel+react&#x4E2D;&#x7684;&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;&#x5C55;&#x5F00;&#x5BF9;&#x8C61;&#x53EA;&#x9002;&#x4E8E;&#x6807;&#x7B7E;&#x5185;&#xFF0C;&#x6240;&#x4EE5;&#x6B64;&#x5904;&#x65E0;&#x663E;&#x793A;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> {<span class="attr">...p</span>} /&gt;</span></span>, <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="comment">// age={18} &#x4F20;&#x5165;Number&#x7C7B;&#x578B;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> <span class="attr">name</span>=<span class="string">&quot;jwj&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">sex</span>=<span class="string">&quot;girl&quot;</span> <span class="attr">speak</span>=<span class="string">{speak}</span> /&gt;</span></span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test1&quot;</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  ); <span class="comment">//&#x8FD9;&#x91CC;&#x4F20;&#x5165;props&#x662F;String&#x7C7B;&#x578B;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">function</span> <span class="title function_">speak</span>(<span class="params"></span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  {</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;123&quot;</span>);</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  }</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h5 id="2-3-props&#x7B80;&#x5199;"><a href="#2-3-props&#x7B80;&#x5199;" class="headerlink" title="2.3.props&#x7B80;&#x5199;"></a>2.3.props&#x7B80;&#x5199;</h5><p><strong>&#x6CE8;&#x610F;:props&#x662F;&#x53EA;&#x8BFB;&#x7684;</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line">      <span class="comment">//   &#x5BF9;&#x6807;&#x7B7E;&#x7761;&#x9192;&#x8FDB;&#x884C;&#x7C7B;&#x578B;&#xFF0C;&#x5FC5;&#x8981;&#x6027;&#x7684;&#x9650;&#x5236;</span></span><br><span class="line"><span class="keyword">static</span> propTypes={</span><br><span class="line">  <span class="attr">name</span>:<span class="title class_">PropTypes</span>.<span class="property">string</span>.<span class="property">isRequired</span>,<span class="comment">//&#x9650;&#x5236;name&#x662F;&#x5B57;&#x7B26;&#x4E32;&#x4E14;&#x5FC5;&#x586B;</span></span><br><span class="line">  <span class="attr">sex</span>:<span class="title class_">PropTypes</span>.<span class="property">string</span>,<span class="comment">//&#x9650;&#x5236;&#x6027;&#x522B;&#x4E3A;&#x5B57;&#x7B26;&#x4E32;</span></span><br><span class="line">  <span class="attr">speak</span>:<span class="title class_">PropTypes</span>.<span class="property">func</span><span class="comment">//&#x9650;&#x5236;&#x51FD;&#x6570;</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">static</span> defaultProps={</span><br><span class="line">  <span class="attr">sex</span>:<span class="string">&apos;&#x4E0D;&#x7537;&#x4E0D;&#x5973;&apos;</span>,</span><br><span class="line">  <span class="attr">age</span>:<span class="number">18</span></span><br><span class="line">}</span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">    <span class="keyword">const</span> { name, age, sex } = <span class="variable language_">this</span>.<span class="property">props</span>;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x59D3;&#x540D;:{name} <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x6027;&#x522B;:{sex}<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x5E74;&#x9F84;:{age + 1} <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h5 id="2-4-&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;&#x7684;&#x6784;&#x9020;&#x5668;&#x548C;props"><a href="#2-4-&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;&#x7684;&#x6784;&#x9020;&#x5668;&#x548C;props" class="headerlink" title="2.4.&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;&#x7684;&#x6784;&#x9020;&#x5668;&#x548C;props"></a>2.4.&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;&#x7684;&#x6784;&#x9020;&#x5668;&#x548C;props</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">constructor</span>(<span class="params">props</span>) {</span><br><span class="line">  <span class="variable language_">super</span>(props);</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">state</span> = { <span class="attr">isHot</span>: <span class="literal">true</span>,<span class="attr">wind</span>:<span class="string">&apos;&#x5FAE;&#x98CE;&apos;</span> }</span><br><span class="line">  <span class="comment">// &#x89E3;&#x51B3;zqy&#x65B9;&#x6CD5;&#x7684;this&#x6307;&#x5411;&#x95EE;&#x9898;</span></span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">zqy</span> = <span class="variable language_">this</span>.<span class="property">zqy</span>.<span class="title function_">bind</span>(<span class="variable language_">this</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>&#x6CE8;&#x610F;:</p>
<p>&#x5728;&#x4E3A; React.Component &#x5B50;&#x7C7B;&#x5B9E;&#x73B0;&#x6784;&#x9020;&#x51FD;&#x6570;&#x65F6;&#xFF0C;&#x5E94;&#x5728;&#x5176;&#x4ED6;&#x8BED;&#x53E5;&#x4E4B;&#x524D;&#x8C03;&#x7528; <code>super(props)</code>&#x3002;&#x5426;&#x5219;&#xFF0C;<code>this.props</code> <strong>&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x4E2D;&#x53EF;&#x80FD;&#x4F1A;&#x51FA;&#x73B0;&#x672A;&#x5B9A;&#x4E49;&#x7684; bug&#x3002;</strong></p>
<h5 id="2-5&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x4F7F;&#x7528;props"><a href="#2-5&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x4F7F;&#x7528;props" class="headerlink" title="2.5&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x4F7F;&#x7528;props"></a>2.5&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x4F7F;&#x7528;props</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">    &lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line">      <span class="keyword">function</span> <span class="title function_">Demo</span>(<span class="params">props</span>) {</span><br><span class="line">        <span class="keyword">const</span>{name,sex,age}=props</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">          <span class="language-xml"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x59D3;&#x540D;:{name} <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x6027;&#x522B;:{sex}<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">li</span>&gt;</span>&#x5E74;&#x9F84;:{age + 1} <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span></span><br><span class="line">        )</span><br><span class="line">      }</span><br><span class="line">      <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> <span class="attr">name</span>=<span class="string">&quot;jwj&quot;</span> <span class="attr">age</span>=<span class="string">&quot;18&quot;</span> <span class="attr">sex</span>=<span class="string">&quot;girl&quot;</span> /&gt;</span></span>,</span><br><span class="line">        <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>)</span><br><span class="line">      ); <span class="comment">//&#x8FD9;&#x91CC;&#x4F20;&#x5165;props&#x662F;String&#x7C7B;&#x578B;</span></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line"><span class="comment">//&#x51FD;&#x6570;&#x5BF9;props&#x7684;&#x9650;&#x5236;&#x53EA;&#x80FD;&#x653E;&#x5728;&#x7C7B;&#x5916;&#x4FA7;&#xFF0C;&#x56E0;&#x4E3A;&#x6CA1;&#x6709;static</span></span><br></pre></td></tr></table></figure>
<h5 id="2-6&#x603B;&#x7ED3;"><a href="#2-6&#x603B;&#x7ED3;" class="headerlink" title="2.6&#x603B;&#x7ED3;"></a>2.6&#x603B;&#x7ED3;</h5><ol>
<li>&#x53EF;&#x8BFB;</li>
<li>&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;&#x5199;&#x5728;&#x5185;&#x90E8;&#x7684;&#x5C5E;&#x6027;&#x9650;&#x5236; static</li>
<li>&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6; &#x53EA;&#x80FD;&#x4F7F;&#x7528;props</li>
<li><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202206300041373.png" alt="image-20220630004112311"></li>
</ol>
<h4 id="3-refs&#x4E0E;&#x4E8B;&#x4EF6;&#x5904;&#x7406;"><a href="#3-refs&#x4E0E;&#x4E8B;&#x4EF6;&#x5904;&#x7406;" class="headerlink" title="3.refs&#x4E0E;&#x4E8B;&#x4EF6;&#x5904;&#x7406;"></a>3.refs&#x4E0E;&#x4E8B;&#x4EF6;&#x5904;&#x7406;</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line">  showData=<span class="function">()=&gt;</span></span><br><span class="line">  {</span><br><span class="line">    <span class="keyword">const</span> input=<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&apos;input1&apos;</span>)</span><br><span class="line">    <span class="title function_">alert</span>(input.<span class="property">value</span>)<span class="comment">//JS&#x5199;&#x6CD5;</span></span><br><span class="line">  }</span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;input1&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;&#x70B9;&#x51FB;&#x6309;&#x94AE;&#x63D0;&#x793A;&#x6570;&#x636E;&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{this.showData}</span>&gt;</span>&#x70B9;&#x6211;&#x63D0;&#x793A;&#x5DE6;&#x4FA7;&#x6570;&#x636E;<span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="symbol">&amp;nbsp;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;&#x5931;&#x53BB;&#x7126;&#x70B9;&#x63D0;&#x793A;&#x6570;&#x636E;&quot;</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><strong>React&#x83B7;&#x53D6;DOM</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">showData=<span class="function">()=&gt;</span></span><br><span class="line">{</span><br><span class="line">    <span class="comment">//&#x8FD9;&#x91CC;&#x7684;&#x5C5E;&#x6027;&#x540D;&#x8981;&#x5BF9;&#x5E94;</span></span><br><span class="line"> <span class="keyword">const</span>{input1}=<span class="variable language_">this</span>.<span class="property">refs</span><span class="comment">//&#x5F97;&#x5230;&#x7684;&#x662F;&#x771F;&#x5B9E;DOM</span></span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(input1);</span><br><span class="line">  <span class="title function_">alert</span>(input1.<span class="property">value</span>)</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h5 id="3-1&#x5B57;&#x7B26;&#x4E32;&#x7C7B;&#x578B;&#x7684;ref-&#x4E0D;&#x63A8;&#x8350;"><a href="#3-1&#x5B57;&#x7B26;&#x4E32;&#x7C7B;&#x578B;&#x7684;ref-&#x4E0D;&#x63A8;&#x8350;" class="headerlink" title="3.1&#x5B57;&#x7B26;&#x4E32;&#x7C7B;&#x578B;&#x7684;ref(&#x4E0D;&#x63A8;&#x8350;)"></a>3.1&#x5B57;&#x7B26;&#x4E32;&#x7C7B;&#x578B;&#x7684;ref(&#x4E0D;&#x63A8;&#x8350;)</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input ref=<span class="string">&quot;input1&quot;</span> type=<span class="string">&quot;text&quot;</span> placeholder=<span class="string">&quot;&#x70B9;&#x51FB;&#x6309;&#x94AE;&#x63D0;&#x793A;&#x6570;&#x636E;&quot;</span> /&gt;</span><br></pre></td></tr></table></figure>
<p>&#x6548;&#x7387;&#x4E0D;&#x9AD8;</p>
<h5 id="3-2&#x56DE;&#x8C03;ref"><a href="#3-2&#x56DE;&#x8C03;ref" class="headerlink" title="3.2&#x56DE;&#x8C03;ref"></a>3.2&#x56DE;&#x8C03;ref</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">//a&#x662F;&#x5F53;&#x524D;&#x8282;&#x70B9;         </span></span><br><span class="line">&lt;input ref={<span class="function">(<span class="params">a</span>)=&gt;</span>{<span class="variable language_">this</span>.<span class="property">input1</span>=a}} type=<span class="string">&quot;text&quot;</span> placeholder=<span class="string">&quot;&#x70B9;&#x51FB;&#x6309;&#x94AE;&#x63D0;&#x793A;&#x6570;&#x636E;&quot;</span> /&gt;</span><br><span class="line">                  </span><br><span class="line">        showData=<span class="function">()=&gt;</span></span><br><span class="line">        {</span><br><span class="line">          <span class="keyword">const</span> {input1}=<span class="variable language_">this</span><span class="comment">//&#x8FD9;&#x91CC;&#x4E22;&#x53BB;&#x82B1;&#x62EC;&#x53F7;&#x4F1A;&#x51FA;&#x73B0;undefined,&#x901A;&#x8FC7;&#x89E3;&#x6784;&#x83B7;&#x53D6;input1</span></span><br><span class="line">          <span class="title function_">alert</span>(input1.<span class="property">value</span>)<span class="comment">//&#x901A;&#x8FC7;value&#x5C5E;&#x6027;&#xFF0C;&#x83B7;&#x53D6;&#x6700;&#x7EC8;&#x7684;&#x503C;</span></span><br><span class="line">        }</span><br></pre></td></tr></table></figure>
<p>Q&#xFF1A;&#x56DE;&#x8C03;ref&#x8C03;&#x7528;&#x6B21;&#x6570;<br>&#x5982;&#x679C; <code>ref</code> &#x56DE;&#x8C03;&#x51FD;&#x6570;&#x662F;&#x4EE5;&#x5185;&#x8054;&#x51FD;&#x6570;&#x7684;&#x65B9;&#x5F0F;&#x5B9A;&#x4E49;&#x7684;&#xFF0C;&#x5728;<strong>&#x66F4;&#x65B0;&#x8FC7;&#x7A0B;&#x4E2D;&#x5B83;&#x4F1A;&#x88AB;&#x6267;&#x884C;&#x4E24;&#x6B21;</strong>&#xFF0C;&#x7B2C;&#x4E00;&#x6B21;&#x4F20;&#x5165;&#x53C2;&#x6570; <code>null</code>&#xFF0C;&#x7136;&#x540E;&#x7B2C;&#x4E8C;&#x6B21;&#x4F1A;&#x4F20;&#x5165;&#x53C2;&#x6570; DOM &#x5143;&#x7D20;&#x3002;&#x8FD9;&#x662F;&#x56E0;&#x4E3A;&#x5728;<strong>&#x6BCF;&#x6B21;&#x6E32;&#x67D3;&#x65F6;&#x4F1A;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x51FD;&#x6570;&#x5B9E;&#x4F8B;&#xFF0C;&#x6240;&#x4EE5; React &#x6E05;&#x7A7A;&#x65E7;&#x7684; ref &#x5E76;&#x4E14;&#x8BBE;&#x7F6E;&#x65B0;&#x7684;</strong>&#x3002;</p>
<p>&#x901A;&#x8FC7;&#x5C06; ref &#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x5B9A;&#x4E49;&#x6210; class &#x7684;&#x7ED1;&#x5B9A;&#x51FD;&#x6570;&#x7684;&#x65B9;&#x5F0F;&#x53EF;&#x4EE5;&#x907F;&#x514D;&#x4E0A;&#x8FF0;&#x95EE;&#x9898;&#xFF0C;&#x4F46;&#x662F;&#x5927;&#x591A;&#x6570;&#x60C5;&#x51B5;&#x4E0B;&#x5B83;&#x662F;&#x65E0;&#x5173;&#x7D27;&#x8981;&#x7684;&#x3002;</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">    &lt;input</span><br><span class="line">        ref={<span class="variable language_">this</span>.<span class="property">saveInput</span>}</span><br><span class="line">        type=<span class="string">&quot;text&quot;</span></span><br><span class="line">        placeholder=<span class="string">&quot;&#x70B9;&#x51FB;&#x6309;&#x94AE;&#x63D0;&#x793A;&#x6570;&#x636E;&quot;</span></span><br><span class="line">      /&gt;</span><br><span class="line">            </span><br><span class="line">  saveInput = <span class="function">(<span class="params">c</span>) =&gt;</span> {</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">input1</span> = c;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">input1</span>);</span><br><span class="line">};</span><br></pre></td></tr></table></figure>
<h5 id="3-3-creatRef&#x521B;&#x5EFA;ref&#x5BB9;&#x5668;"><a href="#3-3-creatRef&#x521B;&#x5EFA;ref&#x5BB9;&#x5668;" class="headerlink" title="3.3 creatRef&#x521B;&#x5EFA;ref&#x5BB9;&#x5668;"></a>3.3 creatRef&#x521B;&#x5EFA;ref&#x5BB9;&#x5668;</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">myRef=<span class="title class_">React</span>.<span class="title function_">createRef</span>()<span class="comment">//&#x8FD4;&#x56DE;&#x88AB;ref&#x6240;&#x6807;&#x8BC6;&#x7684;&#x8282;&#x70B9;,&#x53EA;&#x80FD;&#x5B58;&#x653E;&#x4E00;&#x4E2A;&#xFF0C;&#x540E;&#x51FA;&#x73B0;&#x7684;&#x4F1A;&#x8986;&#x76D6;&#x524D;&#x4E00;&#x4E2A;</span></span><br><span class="line">showData = <span class="function">() =&gt;</span> {</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>.<span class="property">myRef</span>.<span class="property">current</span>.<span class="property">value</span>);<span class="comment">//this.myRef.current&#x5C31;&#x662F;&#x5B58;&#x653E;&#x7684;&#x8282;&#x70B9;</span></span><br><span class="line">};</span><br><span class="line"></span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">input</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">ref</span>=<span class="string">{this.myRef}//&#x8BE5;&#x8282;&#x70B9;&#x5C31;&#x5B58;&#x653E;&#x5728;myRef&#x91CC;&#x9762;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">type</span>=<span class="string">&quot;text&quot;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        <span class="attr">placeholder</span>=<span class="string">&quot;&#x70B9;&#x51FB;&#x6309;&#x94AE;&#x63D0;&#x793A;&#x6570;&#x636E;&quot;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">      /&gt;</span></span></span><br></pre></td></tr></table></figure>
<h5 id="3-4&#x603B;&#x7ED3;ref"><a href="#3-4&#x603B;&#x7ED3;ref" class="headerlink" title="3.4&#x603B;&#x7ED3;ref"></a>3.4&#x603B;&#x7ED3;ref</h5><h5 id="3-5&#x4E8B;&#x4EF6;&#x5904;&#x7406;"><a href="#3-5&#x4E8B;&#x4EF6;&#x5904;&#x7406;" class="headerlink" title="3.5&#x4E8B;&#x4EF6;&#x5904;&#x7406;"></a>3.5&#x4E8B;&#x4EF6;&#x5904;&#x7406;</h5><ol>
<li>&#x901A;&#x8FC7;onXxx&#x5C5E;&#x6027;&#x6307;&#x5B9A;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x51FD;&#x6570;(<strong>&#x6CE8;&#x610F;&#x5927;&#x5C0F;&#x5199;</strong>)</li>
</ol>
<ul>
<li><p>React&#x4F7F;&#x7528;&#x7684;&#x662F;<strong>&#x81EA;&#x5B9A;&#x4E49;(&#x5408;&#x6210;)&#x4E8B;&#x4EF6;</strong>, &#x800C;&#x4E0D;&#x662F;&#x4F7F;&#x7528;&#x7684;&#x539F;&#x751F;DOM&#x4E8B;&#x4EF6;&#x2014;&gt;&#x4E3A;&#x4E86;&#x66F4;&#x597D;&#x7684;&#x517C;&#x5BB9;&#x6027;  &#x539F;&#x751F;&#xFF1A;onclick Reactr&#x5C01;&#x88C5;&#xFF1A;onClick</p>
</li>
<li><p>React&#x4E2D;&#x7684;&#x4E8B;&#x4EF6;&#x662F;&#x901A;&#x8FC7;&#x4E8B;&#x4EF6;&#x59D4;&#x6258;&#x65B9;&#x5F0F;&#x5904;&#x7406;&#x7684;(&#x59D4;&#x6258;&#x7ED9;&#x7EC4;&#x4EF6;&#x6700;&#x5916;&#x5C42;&#x7684;&#x5143;&#x7D20;)</p>
</li>
</ul>
<ol>
<li>&#x901A;&#x8FC7;<strong>event.targe</strong>t&#x5F97;&#x5230;&#x53D1;&#x751F;&#x4E8B;&#x4EF6;&#x7684;DOM&#x5143;&#x7D20;&#x5BF9;&#x8C61;(&#x53EF;&#x4EE5;&#x51CF;&#x5C11;ref&#x7684;&#x4F7F;&#x7528;)</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//&#x53D1;&#x751F;&#x7684;&#x4E8B;&#x4EF6;&#x5143;&#x7D20;&#x6B63;&#x597D;&#x662F;&#x8981;&#x64CD;&#x4F5C;&#x7684;&#x4E8B;&#x4EF6;&#x5143;&#x7D20;</span></span><br><span class="line">	showData=<span class="function">(<span class="params">event</span>)=&gt;</span></span><br><span class="line">    {</span><br><span class="line">        <span class="title function_">alert</span>(event.<span class="property">target</span>.<span class="property">value</span>);</span><br><span class="line">    }</span><br><span class="line">     &lt;input onBlur=&#x201D;<span class="variable language_">this</span>.<span class="property">showData</span>&#x201C;type=<span class="string">&quot;text&quot;</span> placeholder=<span class="string">&quot;&#x5931;&#x53BB;&#x7126;&#x70B9;&#x63D0;&#x793A;&#x6570;&#x636E;&quot;</span> /&gt;</span><br></pre></td></tr></table></figure>
<h3 id="3-&#x83B7;&#x53D6;&#x8868;&#x5355;&#x6570;&#x636E;-&#x6D89;&#x53CA;&#x5230;ajax&#x77E5;&#x8BC6;"><a href="#3-&#x83B7;&#x53D6;&#x8868;&#x5355;&#x6570;&#x636E;-&#x6D89;&#x53CA;&#x5230;ajax&#x77E5;&#x8BC6;" class="headerlink" title="3.&#x83B7;&#x53D6;&#x8868;&#x5355;&#x6570;&#x636E;(&#x6D89;&#x53CA;&#x5230;ajax&#x77E5;&#x8BC6;)"></a>3.&#x83B7;&#x53D6;&#x8868;&#x5355;&#x6570;&#x636E;(&#x6D89;&#x53CA;&#x5230;ajax&#x77E5;&#x8BC6;)</h3><h4 id="1-&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;"><a href="#1-&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;" class="headerlink" title="1.&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;"></a>1.&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line">    handleSubmit = <span class="function">(<span class="params">event</span>) =&gt;</span> {</span><br><span class="line">        event.<span class="title function_">preventDefault</span>()<span class="comment">//&#x963B;&#x6B62;&#x63D0;&#x4EA4;&#x540E;&#x9ED8;&#x8BA4;&#x8DF3;&#x8F6C;&#x5237;&#x65B0;</span></span><br><span class="line">    <span class="keyword">const</span> {username,password}=<span class="variable language_">this</span> <span class="comment">//&#x73B0;&#x7528;&#x73B0;&#x53D6;</span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">`&#x4F60;&#x8F93;&#x5165;&#x7684;&#x7528;&#x6237;&#x540D;&#x662F;: <span class="subst">${username.value}</span>,&#x4F60;&#x8F93;&#x5165;&#x7684;&#x5BC6;&#x7801;&#x662F;: <span class="subst">${password.value}</span>`</span>);<span class="comment">//&#x5360;&#x4F4D;&#x7B26;&#x548C;&#x6A21;&#x677F;&#x5B57;&#x7B26;&#x4E32;&#x7684;&#x4F7F;&#x7528;&#xFF0C;&#x662F;esc&#x4E0B;&#x9762;&#x7684;&#x952E;</span></span><br><span class="line">  }</span><br><span class="line">    <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://www.baidu.com&quot;</span> <span class="attr">onSubmit</span>=<span class="string">{this.handleSubmit}</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          &#x7528;&#x6237;&#x540D; <span class="tag">&lt;<span class="name">input</span> <span class="attr">ref</span>=<span class="string">{c</span>=&gt;</span>this.username=c}type=&quot;text&quot; /&gt;</span></span><br><span class="line"><span class="language-xml">          &#x5BC6;&#x7801;   <span class="tag">&lt;<span class="name">input</span> <span class="attr">ref</span>=<span class="string">{c</span>=&gt;</span>this.password=c}type=&quot;password&quot; /&gt;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">button</span>&gt;</span>&#x767B;&#x5F55;<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span></span><br><span class="line">      );</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">  <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> /&gt;</span></span>, <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h4 id="2-&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;"><a href="#2-&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;" class="headerlink" title="2.&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;"></a>2.&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;</h4><p><strong><em>&#x6E32;&#x67D3;&#x8868;&#x5355;&#x7684; React &#x7EC4;&#x4EF6;&#x8FD8;&#x63A7;&#x5236;&#x7740;&#x7528;&#x6237;&#x8F93;&#x5165;&#x8FC7;&#x7A0B;&#x4E2D;&#x8868;&#x5355;&#x53D1;&#x751F;&#x7684;&#x64CD;&#x4F5C;&#x3002;&#x88AB; React &#x4EE5;&#x8FD9;&#x79CD;&#x65B9;&#x5F0F;&#x63A7;&#x5236;&#x53D6;&#x503C;&#x7684;&#x8868;&#x5355;&#x8F93;&#x5165;&#x5143;&#x7D20;&#x5C31;&#x53EB;&#x505A;&#x201C;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x201D;&#x3002;</em></strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/babel&quot;</span>&gt;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line">    <span class="comment">// &#x521D;&#x59CB;&#x5316;&#x72B6;&#x6001;</span></span><br><span class="line">    state={</span><br><span class="line">        <span class="attr">username</span>:<span class="string">&apos;&apos;</span>,</span><br><span class="line">        <span class="attr">password</span>:<span class="string">&apos;&apos;</span></span><br><span class="line">    }</span><br><span class="line">    handleSubmit = <span class="function">(<span class="params">event</span>) =&gt;</span> {</span><br><span class="line">        event.<span class="title function_">preventDefault</span>()</span><br><span class="line">    <span class="keyword">const</span> {username,password}=<span class="variable language_">this</span>.<span class="property">state</span></span><br><span class="line">    <span class="title function_">alert</span>(<span class="string">`&#x4F60;&#x8F93;&#x5165;&#x7684;&#x7528;&#x6237;&#x540D;&#x662F; <span class="subst">${username}</span>,&#x8F93;&#x5165;&#x7684;&#x5BC6;&#x7801;&#x662F;<span class="subst">${password}</span>`</span>)</span><br><span class="line">  }</span><br><span class="line">  saveUsername=<span class="function">(<span class="params">event</span>)=&gt;</span></span><br><span class="line">  {</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(event.<span class="property">target</span>.<span class="property">value</span>);</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">setState</span>({<span class="attr">username</span>:event.<span class="property">target</span>.<span class="property">value</span>})</span><br><span class="line">  }</span><br><span class="line">  savePassword=<span class="function">(<span class="params">event</span>)=&gt;</span></span><br><span class="line">  {</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">setState</span>({<span class="attr">password</span>:event.<span class="property">target</span>.<span class="property">value</span>})</span><br><span class="line">  }</span><br><span class="line">    <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://www.baidu.com&quot;</span> <span class="attr">onSubmit</span>=<span class="string">{this.handleSubmit}</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          &#x7528;&#x6237;&#x540D; <span class="tag">&lt;<span class="name">input</span> <span class="attr">onChange</span>=<span class="string">{this.saveUsername}</span> <span class="attr">ref</span>=<span class="string">{c</span>=&gt;</span>this.username=c}type=&quot;text&quot; /&gt;</span></span><br><span class="line"><span class="language-xml">          &#x5BC6;&#x7801;   <span class="tag">&lt;<span class="name">input</span> <span class="attr">onChange</span>=<span class="string">{this.savePassword}</span> <span class="attr">ref</span>=<span class="string">{c</span>=&gt;</span>this.password=c}type=&quot;password&quot; /&gt;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">button</span>&gt;</span>&#x767B;&#x5F55;<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span></span><br><span class="line">      );</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">  <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> /&gt;</span></span>, <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<h4 id="3-&#x9AD8;&#x9636;&#x51FD;&#x6570;&#x548C;&#x51FD;&#x6570;&#x67EF;&#x91CC;&#x5316;"><a href="#3-&#x9AD8;&#x9636;&#x51FD;&#x6570;&#x548C;&#x51FD;&#x6570;&#x67EF;&#x91CC;&#x5316;" class="headerlink" title="3.&#x9AD8;&#x9636;&#x51FD;&#x6570;&#x548C;&#x51FD;&#x6570;&#x67EF;&#x91CC;&#x5316;"></a>3.&#x9AD8;&#x9636;&#x51FD;&#x6570;&#x548C;&#x51FD;&#x6570;&#x67EF;&#x91CC;&#x5316;</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">    <span class="comment">//#region</span></span><br><span class="line">    <span class="comment">/* </span></span><br><span class="line"><span class="comment">    	&#x9AD8;&#x9636;&#x51FD;&#x6570;:&#x5982;&#x679C;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#x7B26;&#x5408;&#x4E0B;&#x9762;2&#x4E2A;&#x89C4;&#x8303;&#x4E2D;&#x7684;&#x4EFB;&#x4F55;&#x4E00;&#x4E2A;&#xFF0C;&#x90A3;&#x4E48;&#x51FD;&#x6570;&#x5C31;&#x662F;&#x9AD8;&#x9636;&#x51FD;&#x6570;</span></span><br><span class="line"><span class="comment">    	1.&#x82E5;A&#x51FD;&#x6570;&#xFF0C;&#x63A5;&#x6536;&#x7684;&#x53C2;&#x6570;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x90A3;&#x4E48;A&#x5C31;&#x53EF;&#x4EE5;&#x79F0;&#x4E4B;&#x4E3A;&#x9AD8;&#x9636;&#x51FD;&#x6570;</span></span><br><span class="line"><span class="comment">    	2.&#x82E5;A&#x51FD;&#x6570;&#xFF0C;&#x8C03;&#x7528;&#x7684;&#x8FD4;&#x56DE;&#x503C;&#x4F9D;&#x7136;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x90A3;&#x4E48;A&#x5C31;&#x5C31;&#x53EF;&#x4EE5;&#x79F0;&#x4E4B;&#x4E3A;&#x9AD8;&#x9636;&#x51FD;&#x6570;</span></span><br><span class="line"><span class="comment">    	&#x5E38;&#x89C1;&#x9AD8;&#x9636;&#x51FD;&#x6570;:Promise,reduce,arrr,map,setTimeout &#x7B49;</span></span><br><span class="line"><span class="comment">    &#x51FD;&#x6570;&#x7684;&#x67EF;&#x91CC;&#x5316;&#xFF0C;&#x901A;&#x8FC7;&#x51FD;&#x6570;&#x8C03;&#x7528;&#x7EE7;&#x7EED;&#x8FD4;&#x56DE;&#x51FD;&#x6570;&#x7684;&#x65B9;&#x5F0F;&#xFF0C;&#x5B9E;&#x73B0;&#x591A;&#x6B21;&#x63A5;&#x6536;&#x53C2;&#x6570;&#x6700;&#x540E;&#x7EDF;&#x4E00;&#x5904;&#x7406;&#x7684;&#x51FD;&#x6570;&#x7F16;&#x7801;&#x5F62;&#x5F0F;</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">    <span class="comment">//#endregion  &#x6298;&#x53E0;&#x65B9;&#x5F0F;</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line">    <span class="comment">// &#x521D;&#x59CB;&#x5316;&#x72B6;&#x6001;</span></span><br><span class="line">    state = {</span><br><span class="line">      <span class="attr">username</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">      <span class="attr">password</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">    };</span><br><span class="line">    handleSubmit = <span class="function">(<span class="params">event</span>) =&gt;</span> {</span><br><span class="line">      event.<span class="title function_">preventDefault</span>();</span><br><span class="line">      <span class="keyword">const</span> { username, password } = <span class="variable language_">this</span>.<span class="property">state</span>;</span><br><span class="line">      <span class="title function_">alert</span>(<span class="string">`&#x4F60;&#x8F93;&#x5165;&#x7684;&#x7528;&#x6237;&#x540D;&#x662F; <span class="subst">${username}</span>,&#x8F93;&#x5165;&#x7684;&#x5BC6;&#x7801;&#x662F;<span class="subst">${password}</span>`</span>);</span><br><span class="line">    };</span><br><span class="line"></span><br><span class="line">    saveUsername = <span class="function">(<span class="params">event</span>) =&gt;</span> {</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(event.<span class="property">target</span>.<span class="property">value</span>);</span><br><span class="line">      <span class="variable language_">this</span>.<span class="title function_">setState</span>({ <span class="attr">username</span>: event.<span class="property">target</span>.<span class="property">value</span> });</span><br><span class="line">    };</span><br><span class="line">    <span class="comment">//&#x4E24;&#x4E2A;&#x51FD;&#x6570;&#x7684;&#x4F5C;&#x7528;&#x4E00;&#x81F4;</span></span><br><span class="line">    savePassword = <span class="function">(<span class="params">event</span>) =&gt;</span> {</span><br><span class="line">      <span class="variable language_">this</span>.<span class="title function_">setState</span>({ <span class="attr">password</span>: event.<span class="property">target</span>.<span class="property">value</span> });</span><br><span class="line">    };</span><br><span class="line">      </span><br><span class="line">     <span class="comment">//&#x5408;&#x5E76;&#x4E3A;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x8C03;&#x7528;&#x8BE5;&#x51FD;&#x6570;&#xFF0C;&#x5E76;&#x4E14;&#x8FD4;&#x56DE;&#x51FD;&#x6570; &#x51FD;&#x6570;&#x7684;&#x67EF;&#x91CC;&#x5316;</span></span><br><span class="line">    save=<span class="function">(<span class="params">dataType</span>)=&gt;</span></span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">return</span> <span class="function">(<span class="params">event</span>)=&gt;</span>{</span><br><span class="line">            <span class="variable language_">this</span>.<span class="title function_">setState</span>({[dataType]:event.<span class="property">target</span>.<span class="property">value</span>})<span class="comment">//&#x5982;&#x679C;&#x4E0D;&#x52A0;[]&#xFF0C;dataType&#x53C8;&#x88AB;&#x5F53;&#x6210;&#x65B0;&#x7684;&#x53D8;&#x91CF;&#x4F20;&#x5165;</span></span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">    <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">      <span class="keyword">return</span> (</span><br><span class="line">        <span class="language-xml"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;https://www.baidu.com&quot;</span> <span class="attr">onSubmit</span>=<span class="string">{this.handleSubmit}</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          &#x7528;&#x6237;&#x540D;{&quot; &quot;}</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">input</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            <span class="attr">onChange</span>=<span class="string">{this.save(</span>&apos;<span class="attr">username</span>&apos;)} //<span class="attr">&#x8FD9;&#x91CC;&#x51FD;&#x6570;&#x52A0;&#x4E86;&#x62EC;&#x53F7;</span>&#xFF0C;<span class="attr">&#x662F;&#x76F4;&#x63A5;&#x8C03;&#x7528;&#x4E86;&#x51FD;&#x6570;</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            <span class="attr">ref</span>=<span class="string">{(c)</span> =&gt;</span> (this.username = c)}</span></span><br><span class="line"><span class="language-xml">            type=&quot;text&quot;</span></span><br><span class="line"><span class="language-xml">          /&gt;</span></span><br><span class="line"><span class="language-xml">          &#x5BC6;&#x7801;{&quot; &quot;}</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">input</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            <span class="attr">onChange</span>=<span class="string">{this.save(</span>&apos;<span class="attr">password</span>&apos;)}</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">            <span class="attr">ref</span>=<span class="string">{(c)</span> =&gt;</span> (this.password = c)}</span></span><br><span class="line"><span class="language-xml">            type=&quot;password&quot;</span></span><br><span class="line"><span class="language-xml">          /&gt;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">button</span>&gt;</span>&#x767B;&#x5F55;<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span></span><br><span class="line">      );</span><br><span class="line">    }</span><br><span class="line">  }</span><br><span class="line">  <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> /&gt;</span></span>, <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>&#x4E0D;&#x7528;&#x67EF;&#x91CC;&#x5316;&#x7684;&#x5B9E;&#x73B0;</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">       save=<span class="function">(<span class="params">dataType,value</span>)=&gt;</span></span><br><span class="line">       {</span><br><span class="line">               <span class="variable language_">this</span>.<span class="title function_">setState</span>({[dataType]:value})<span class="comment">//&#x5982;&#x679C;&#x4E0D;&#x52A0;[]&#xFF0C;dataType&#x53C8;&#x88AB;&#x5F53;&#x6210;&#x65B0;&#x7684;&#x53D8;&#x91CF;&#x4F20;&#x5165;</span></span><br><span class="line">       }</span><br><span class="line">  <span class="comment">//&#x65B9;&#x6CD5;&#x4E0D;&#x7528;return&#x8FD4;&#x56DE;&#x503C;</span></span><br><span class="line">onChange={<span class="function">(<span class="params">event</span>)=&gt;</span>{</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">save</span>(<span class="string">&apos;username&apos;</span>,event.<span class="property">target</span>.<span class="property">value</span>)</span><br><span class="line">		}}</span><br></pre></td></tr></table></figure>
<h3 id="4-&#x751F;&#x547D;&#x5468;&#x671F;"><a href="#4-&#x751F;&#x547D;&#x5468;&#x671F;" class="headerlink" title="4.&#x751F;&#x547D;&#x5468;&#x671F;"></a>4.&#x751F;&#x547D;&#x5468;&#x671F;</h3><p><strong>&#x53EA;&#x80FD;&#x5728;&#x7C7B;&#x5F0F;&#x7EC4;&#x4EF6;&#x4E2D;&#x4F7F;&#x7528;</strong></p>
<p>&#x5F53; <code>Clock</code> &#x7EC4;&#x4EF6;&#x7B2C;&#x4E00;&#x6B21;&#x88AB;&#x6E32;&#x67D3;&#x5230; DOM &#x4E2D;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5C31;&#x4E3A;&#x5176;&#x8BBE;&#x7F6E;&#x4E00;&#x4E2A;&#x8BA1;&#x65F6;&#x5668;&#x3002;&#x8FD9;&#x5728; React &#x4E2D;&#x88AB;&#x79F0;&#x4E3A;&#x201C;&#x6302;&#x8F7D;&#xFF08;mount&#xFF09;&#x201D;&#x3002;</p>
<p>&#x540C;&#x65F6;&#xFF0C;&#x5F53; DOM &#x4E2D; <code>Clock</code> &#x7EC4;&#x4EF6;&#x88AB;&#x5220;&#x9664;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5E94;&#x8BE5;&#x6E05;&#x9664;&#x8BA1;&#x65F6;&#x5668;&#x3002;&#x8FD9;&#x5728; React &#x4E2D;&#x88AB;&#x79F0;&#x4E3A;&#x201C;&#x5378;&#x8F7D;&#xFF08;unmount&#xFF09;&#x201D;&#x3002;</p>
<p> <code>ReactDOM.unmountComponentAtNode(document.getElementById(&quot;test&quot;));</code></p>
<h5 id="1-&#x751F;&#x547D;&#x5468;&#x671F;&#x56FE;"><a href="#1-&#x751F;&#x547D;&#x5468;&#x671F;&#x56FE;" class="headerlink" title="1.&#x751F;&#x547D;&#x5468;&#x671F;&#x56FE;"></a>1.&#x751F;&#x547D;&#x5468;&#x671F;&#x56FE;</h5><ul>
<li>&#x65E7;</li>
</ul>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207012357068.png" alt="&#x751F;&#x547D;&#x5468;&#x671F;&#x6D41;&#x7A0B;&#x56FE;&#x65E7;"></p>
<h6 id="&#x65E7;-&#x6CE8;&#x610F;&#x4E8B;&#x9879;"><a href="#&#x65E7;-&#x6CE8;&#x610F;&#x4E8B;&#x9879;" class="headerlink" title="(&#x65E7;)&#x6CE8;&#x610F;&#x4E8B;&#x9879;"></a>(&#x65E7;)&#x6CE8;&#x610F;&#x4E8B;&#x9879;</h6><ol>
<li><code>showComponentUpdate</code>&#x9ED8;&#x8BA4;&#x4E3A;true&#xFF0C;&#x5982;&#x679C;&#x5199;&#x4E86;&#x8BE5;&#x94A9;&#x5B50;&#x5C31;<strong>&#x8981;&#x660E;&#x786E;&#x8FD4;&#x56DE;&#x7684;&#x5E03;&#x5C14;&#x503C;</strong>&#xFF0C;&#x5426;&#x5219;&#x4F1A;&#x62A5;&#x9519;(undefined)</li>
<li><code>forceUpdate()</code>&#x5F3A;&#x5236;&#x66F4;&#x65B0;&#xFF0C;&#x4E0D;&#x5BF9;&#x72B6;&#x6001;&#x8FDB;&#x884C;&#x4FEE;&#x6539;&#xFF0C;&#x7EC4;&#x4EF6;&#x4E5F;&#x53EF;&#x4EE5;&#x66F4;&#x65B0;&#x3002;</li>
<li>&#x521B;&#x5EFA;&#x7236;&#x5B50;&#x7EC4;&#x4EF6;</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">  render() {</span><br><span class="line">    return (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;div&gt;A&lt;/div&gt;</span><br><span class="line">        &lt;B /&gt; </span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    );</span><br><span class="line">  }</span><br><span class="line">}</span><br><span class="line">class B extends React.Component {</span><br><span class="line">  render() {</span><br><span class="line">    return (</span><br><span class="line">        &lt;div&gt;B&lt;/div&gt;</span><br><span class="line">    );</span><br><span class="line">  }</span><br><span class="line">}</span><br><span class="line">ReactDOM.render(&lt;A /&gt;, document.getElementById(&quot;test&quot;));</span><br></pre></td></tr></table></figure>
<p>4.<code>componentWillReceiveProps</code> &#x521D;&#x59CB;&#x72B6;&#x6001;&#x7684;pros&#x4E0D;&#x7B97;&#xFF0C;&#x8981;&#x91CD;&#x65B0;&#x66F4;&#x65B0;&#x540E;&#x624D;&#x4F1A;&#x6267;&#x884C;</p>
<p>5.</p>
<p>&#x200B;    <strong>1.</strong> <strong>&#x521D;&#x59CB;&#x5316;&#x9636;&#x6BB5;:</strong> &#x7531;<strong>ReactDOM.render()</strong>&#x89E6;&#x53D1;&#x2014;-&#x521D;&#x6B21;&#x6E32;&#x67D3;</p>
<p>\1.   constructor()</p>
<p>\2.   componentWillMount()</p>
<p>\3.   render()</p>
<p>\4.   componentDidMount() ==&gt;&#x5E38;&#x7528;&#xFF0C;&#x4E00;&#x822C;&#x505A;&#x4E00;&#x4E9B;&#x521D;&#x59CB;&#x5316;&#x7684;&#x4E8B;&#x60C5;:&#x5F00;&#x542F;&#x5B9A;&#x65F6;&#x5668;&#xFF0C;&#x53D1;&#x9001;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#xFF0C;&#x8BA2;&#x9605;&#x4FE1;&#x606F;</p>
<p>&#x200B;    <strong>2.</strong> <strong>&#x66F4;&#x65B0;&#x9636;&#x6BB5;:</strong> &#x7531;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;t<strong>his.setSate()&#x6216;&#x7236;&#x7EC4;&#x4EF6;&#x91CD;&#x65B0;render</strong>&#x89E6;&#x53D1;</p>
<p>\1.   shouldComponentUpdate()</p>
<p>\2.   componentWillUpdate()</p>
<p>\3.   render() ==&gt;&#x5FC5;&#x7528;</p>
<p>\4.   componentDidUpdate()</p>
<p>&#x200B;    <strong>3.</strong> <strong>&#x5378;&#x8F7D;&#x7EC4;&#x4EF6;:</strong> &#x7531;<strong>ReactDOM.unmountComponentAtNode()</strong>&#x89E6;&#x53D1;</p>
<pre><code>    1. componentWillUnmount() ==&gt;&#x5E38;&#x7528;&#xFF1A;&#x5173;&#x95ED;&#x5B9A;&#x65F6;&#x5668;&#xFF0C;&#x5173;&#x95ED;&#x8BA2;&#x9605;&#x4FE1;&#x606F;
</code></pre><ul>
<li>&#x65B0;</li>
</ul>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207012341307.png" alt="&#x751F;&#x547D;&#x5468;&#x671F;&#x56FE;(&#x65B0;)"></p>
<h6 id="&#x65B0;-&#x6CE8;&#x610F;&#x4E8B;&#x9879;"><a href="#&#x65B0;-&#x6CE8;&#x610F;&#x4E8B;&#x9879;" class="headerlink" title="(&#x65B0;)&#x6CE8;&#x610F;&#x4E8B;&#x9879;"></a>(&#x65B0;)&#x6CE8;&#x610F;&#x4E8B;&#x9879;</h6><p>1.<code>componentWillReceiveProps,componentWillUpdate,componentWillMount</code>  &#x5728;&#x65B0;&#x7248;&#x672C;&#x63A8;&#x8350;&#x4F7F;&#x7528;<strong>UNSAFE_xx</strong></p>
<p>2.&#x65B0;&#x589E;&#x4E0E;&#x4E22;&#x5F03;</p>
<ul>
<li><p><strong>getDerivedStateFromProps</strong> ==&gt;componentWillMount</p>
</li>
<li><p>==&gt;componentWillReceiveProps</p>
</li>
<li><strong>getSnapshotBeforeUpdate</strong>==&gt;componentWillUpdate</li>
</ul>
<p>3.&#x65B0;&#x589E;&#x94A9;&#x5B50;&#x4ECB;&#x7ECD;</p>
<ol>
<li><strong>getDerivedStateFromProps &#x6D3E;&#x751F;&#x51FD;&#x6570;</strong></li>
</ol>
<p><code>getDerivedStateFromProps</code> &#x7684;&#x5B58;&#x5728;&#x53EA;&#x6709;&#x4E00;&#x4E2A;&#x76EE;&#x7684;&#xFF1A;&#x8BA9;&#x7EC4;&#x4EF6;&#x5728; <strong>props &#x53D8;&#x5316;</strong>&#x65F6;&#x66F4;&#x65B0; state&#x3002;</p>
<p>&#x82E5;state&#x7684;&#x503C;&#x5728;&#x4EFB;&#x4F55;&#x65F6;&#x5019;&#x90FD;&#x53D6;&#x51B3;&#x90FD;&#x53D6;&#x51B3;&#x4E8E;props&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x3002;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">static getDerivedStateFromProps()</span><br><span class="line">{</span><br><span class="line">    return null//&#x72B6;&#x6001;&#x5BF9;&#x8C61;</span><br><span class="line">    //return {count:108},&#x5F71;&#x54CD;&#x5F53;&#x524D;&#x72B6;&#x6001;&#x4E14;&#x65E0;&#x6CD5;&#x6539;&#x53D8;&#x72B6;&#x6001;&#x6570;&#x636E;</span><br><span class="line">    &#x5982;&#x679C;&#x5199;&#x6B7B;&#x4E00;&#x4E2A;&#x72B6;&#x6001;&#x6570;&#x636E;&#xFF0C;&#x90A3;&#x4E48;&#x8BE5;&#x72B6;&#x6001;&#x6570;&#x636E;&#x5219;&#x65E0;&#x6CD5;&#x6539;&#x53D8;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<ol>
<li><strong>getSnapshotBeforeUpdate</strong></li>
</ol>
<p><code>getSnapshotBeforeUpdate()</code> &#x5728;&#x6700;&#x8FD1;&#x4E00;&#x6B21;&#x6E32;&#x67D3;&#x8F93;&#x51FA;&#xFF08;&#x63D0;&#x4EA4;&#x5230; DOM &#x8282;&#x70B9;&#xFF09;&#x4E4B;&#x524D;&#x8C03;&#x7528;&#x3002;</p>
<p>&#x5B83;&#x4F7F;&#x5F97;&#x7EC4;&#x4EF6;&#x80FD;&#x5728;&#x53D1;&#x751F;&#x66F4;&#x6539;&#x4E4B;&#x524D;&#x4ECE; DOM &#x4E2D;&#x6355;&#x83B7;&#x4E00;&#x4E9B;&#x4FE1;&#x606F;&#xFF08;&#x4F8B;&#x5982;&#xFF0C;&#x6EDA;&#x52A8;&#x4F4D;&#x7F6E;&#xFF09;&#x3002;</p>
<p>&#x6B64;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#x7684;&#x4EFB;&#x4F55;&#x8FD4;&#x56DE;&#x503C;&#x5C06;&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x9012;&#x7ED9; <code>componentDidUpdate()</code>&#x3002;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">getSnapshotBeforeUpdate(prevProps, prevState)</span><br><span class="line">{</span><br><span class="line">    </span><br><span class="line">}</span><br><span class="line">componentDidUpdate(preProps,preState&#xFF0C;snapshotValue)//&#x53EF;&#x4EE5;&#x63A5;&#x6536;&#x5230;&#x4E09;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x66F4;&#x65B0;&#x524D;&#x7684;&#x6570;&#x636E;props&#x548C;state&#x6570;&#x636E;&#x548C;&#x5FEB;&#x7167;&#x503C;</span><br><span class="line">{</span><br><span class="line">    </span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>&#x5B9E;&#x4F8B;:&#x6EDA;&#x52A8;&#x6570;&#x636E;&#x53EF;&#x4EE5;&#x5B9A;&#x4F4D;&#x67D0;&#x4E00;&#x5904;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">        state = { newsArr: [] };</span><br><span class="line">        componentDidMount() {</span><br><span class="line">          setInterval(() =&gt; {</span><br><span class="line">            const { newsArr } = this.state;</span><br><span class="line">            const news = &quot;&#x65B0;&#x95FB;&quot; + (newsArr.length + 1);</span><br><span class="line">            this.setState({ newsArr: [news, ...newsArr] });</span><br><span class="line">          }, 1000);</span><br><span class="line">        }</span><br><span class="line"></span><br><span class="line">        getSnapshotBeforeUpdate(prevProps, prevState)</span><br><span class="line">      {</span><br><span class="line">          return this.refs.list.scrollHeight</span><br><span class="line">      }</span><br><span class="line">componentDidUpdate(preProps,preState,snapshotValue)//&#x53EF;&#x4EE5;&#x63A5;&#x6536;&#x5230;&#x4E09;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x66F4;&#x65B0;&#x524D;&#x7684;&#x6570;&#x636E;props&#x548C;state&#x6570;&#x636E;&#x548C;&#x5FEB;&#x7167;&#x503C;</span><br><span class="line">{</span><br><span class="line">    this.refs.list.scrollTop+=this.refs.list.scrollHeight-snapshotValue</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207021609269.png" alt="image-20220702160904177"></p>
<h6 id="&#x603B;&#x7ED3;"><a href="#&#x603B;&#x7ED3;" class="headerlink" title="&#x603B;&#x7ED3;"></a>&#x603B;&#x7ED3;</h6><p>1.&#x91CD;&#x8981;&#x7684;&#x52FE;&#x5B50;</p>
<p>\1.   render&#xFF1A;&#x521D;&#x59CB;&#x5316;&#x6E32;&#x67D3;&#x6216;&#x66F4;&#x65B0;&#x6E32;&#x67D3;&#x8C03;&#x7528;</p>
<p>\2.   componentDidMount&#xFF1A;&#x5F00;&#x542F;&#x76D1;&#x542C;, &#x53D1;&#x9001;ajax&#x8BF7;&#x6C42;</p>
<p>\3.   componentWillUnmount&#xFF1A;&#x505A;&#x4E00;&#x4E9B;&#x6536;&#x5C3E;&#x5DE5;&#x4F5C;, &#x5982;: &#x6E05;&#x7406;&#x5B9A;&#x65F6;&#x5668;</p>
<p>2.&#x5373;&#x5C06;&#x5E9F;&#x5F03;&#x7684;&#x52FE;&#x5B50;</p>
<p>\1.   componentWillMount</p>
<p>\2.   componentWillReceiveProps</p>
<p>\3.   componentWillUpdate</p>
<h5 id="2-&#x7EC4;&#x4EF6;&#x6302;&#x8F7D;-&#x5378;&#x8F7D;&#x4F8B;&#x5B50;"><a href="#2-&#x7EC4;&#x4EF6;&#x6302;&#x8F7D;-&#x5378;&#x8F7D;&#x4F8B;&#x5B50;" class="headerlink" title="2. &#x7EC4;&#x4EF6;&#x6302;&#x8F7D;/&#x5378;&#x8F7D;&#x4F8B;&#x5B50;"></a>2. &#x7EC4;&#x4EF6;&#x6302;&#x8F7D;/&#x5378;&#x8F7D;&#x4F8B;&#x5B50;</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">      <span class="keyword">class</span> <span class="title class_">Demo</span> <span class="keyword">extends</span> <span class="title class_ inherited__">React.Component</span> {</span><br><span class="line">        state = { <span class="attr">opacity</span>: <span class="number">1</span> };</span><br><span class="line">        death = <span class="function">() =&gt;</span> {</span><br><span class="line">          <span class="built_in">clearInterval</span>(<span class="variable language_">this</span>.<span class="property">timer</span>);</span><br><span class="line">          <span class="title class_">ReactDOM</span>.<span class="title function_">unmountComponentAtNode</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span><br><span class="line">        };</span><br><span class="line">          </span><br><span class="line">        <span class="comment">//&#x4E0E;render&#x4E00;&#x4E2A;&#x7EA7;&#x522B;&#xFF0C;&#x53EA;&#x6267;&#x884C;&#x4E00;&#x6B21;&#x3002;&#x7EC4;&#x4EF6;&#x6302;&#x8F7D;&#x9875;&#x9762;&#x540E;&#x8C03;&#x7528;</span></span><br><span class="line">        <span class="title function_">componentDidMount</span>(<span class="params"></span>) {</span><br><span class="line">          <span class="variable language_">this</span>.<span class="property">timer</span> = <span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> {</span><br><span class="line">            <span class="keyword">let</span> { opacity } = <span class="variable language_">this</span>.<span class="property">state</span>;</span><br><span class="line">            opacity -= <span class="number">0.1</span>;</span><br><span class="line">            <span class="keyword">if</span> (opacity &lt;= <span class="number">0</span>) opacity = <span class="number">1</span>;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="title function_">setState</span>({ opacity }); <span class="comment">//&#x66F4;&#x6539;&#x72B6;&#x6001;&#xFF0C;&#x8C03;&#x7528;render&#xFF0C;&#x5F15;&#x53D1;&#x65E0;&#x9650;&#x9012;&#x5F52;</span></span><br><span class="line">          }, <span class="number">200</span>);</span><br><span class="line">        }</span><br><span class="line">          </span><br><span class="line">        <span class="comment">// &#x521D;&#x59CB;&#x5316;&#x6E32;&#x67D3;&#xFF0C;&#x72B6;&#x6001;&#x66F4;&#x65B0;&#x540E;&#x8C03;&#x7528;</span></span><br><span class="line">        <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">          <span class="keyword">return</span> (</span><br><span class="line">            <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">              {&quot; &quot;}</span></span><br><span class="line"><span class="language-xml">              <span class="tag">&lt;<span class="name">h2</span> <span class="attr">style</span>=<span class="string">{{</span> <span class="attr">opacity:</span> <span class="attr">this.state.opacity</span> }}&gt;</span></span></span><br><span class="line"><span class="language-xml">                React &#x5B66;&#x4E0D;&#x4F1A;&#x600E;&#x4E48;&#x529E;?</span></span><br><span class="line"><span class="language-xml">              <span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">              <span class="tag">&lt;<span class="name">button</span> <span class="attr">onClick</span>=<span class="string">{this.death}</span>&gt;</span>&#x4E0D;&#x6D3B;&#x4E86;<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">          );</span><br><span class="line">        }</span><br><span class="line">      }</span><br><span class="line">      <span class="title class_">ReactDOM</span>.<span class="title function_">render</span>(<span class="language-xml"><span class="tag">&lt;<span class="name">Demo</span> /&gt;</span></span>, <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;test&quot;</span>));</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line"><span class="language-xml">&lt;--------------------------------</span></span><br><span class="line"><span class="language-xml">//        //&#x7EC4;&#x4EF6;&#x5378;&#x8F7D;&#x524D;&#x8C03;&#x7528;</span></span><br><span class="line"><span class="language-xml">        componentWillUnmount()</span></span><br><span class="line"><span class="language-xml">        {</span></span><br><span class="line"><span class="language-xml">            clearInterval(this.timer)</span></span><br><span class="line"><span class="language-xml">        }</span></span><br></pre></td></tr></table></figure>
<h5 id="3-&#x751F;&#x547D;&#x5468;&#x671F;&#x56DE;&#x8C03;&#x51FD;&#x6570;-&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570;-&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;"><a href="#3-&#x751F;&#x547D;&#x5468;&#x671F;&#x56DE;&#x8C03;&#x51FD;&#x6570;-&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570;-&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;" class="headerlink" title="3.&#x751F;&#x547D;&#x5468;&#x671F;&#x56DE;&#x8C03;&#x51FD;&#x6570;/&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570;/&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;"></a>3.&#x751F;&#x547D;&#x5468;&#x671F;&#x56DE;&#x8C03;&#x51FD;&#x6570;/&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570;/&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;</h5><ol>
<li>render&#xFF1A;&#x521D;&#x59CB;&#x5316;&#x6E32;&#x67D3;&#x6216;&#x66F4;&#x65B0;&#x6E32;&#x67D3;&#x8C03;&#x7528;</li>
<li>componentDidMount&#xFF1A;&#x5F00;&#x542F;&#x76D1;&#x542C;, &#x53D1;&#x9001;ajax&#x8BF7;&#x6C42;</li>
<li>componentWillUnmount&#xFF1A;&#x505A;&#x4E00;&#x4E9B;&#x6536;&#x5C3E;&#x5DE5;&#x4F5C;, &#x5982;: &#x6E05;&#x7406;&#x5B9A;&#x65F6;&#x5668;</li>
</ol>
<h3 id="5-DOM&#x7684;diffing&#x7B97;&#x6CD5;"><a href="#5-DOM&#x7684;diffing&#x7B97;&#x6CD5;" class="headerlink" title="5.DOM&#x7684;diffing&#x7B97;&#x6CD5;"></a>5.DOM&#x7684;diffing&#x7B97;&#x6CD5;</h3><p>&#x6BD4;&#x5BF9;&#x7684;<strong>&#x6700;&#x5C0F;&#x5355;&#x4F4D;&#x662F;&#x6807;&#x7B7E;/&#x8282;&#x70B9;</strong>&#xFF0C;<strong>&#x9010;&#x5C42;&#x5BF9;&#x6BD4;</strong></p>
<h4 id="1-&#x4F8B;&#x5B50;"><a href="#1-&#x4F8B;&#x5B50;" class="headerlink" title="1.&#x4F8B;&#x5B50;"></a>1.&#x4F8B;&#x5B50;</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">    state = {</span><br><span class="line">          persons: [</span><br><span class="line">            { id: 1, name: &quot;zqy&quot;, age: 18 },</span><br><span class="line">            { id: 2, name: &quot;jwj&quot;, age: 19 },</span><br><span class="line">          ],</span><br><span class="line">        };</span><br><span class="line">        add = () =&gt; {</span><br><span class="line">          const { persons } = this.state;</span><br><span class="line">          const p = { id: persons.length + 1, name: &quot;&#x5C0F;&#x738B;&quot;, age: 20 };</span><br><span class="line">          this.setState({ persons: [p, ...persons] });///&#x5C06;&#x65B0;&#x6570;&#x636E;&#x653E;&#x5728;&#x539F;&#x6570;&#x636E;&#x4E4B;&#x524D;</span><br><span class="line">        };</span><br><span class="line">        render() {</span><br><span class="line">          return (</span><br><span class="line">            &lt;div&gt;</span><br><span class="line">              {&quot; &quot;}</span><br><span class="line">              &lt;h2&gt;&#x5C55;&#x793A;&#x4EBA;&#x5458;&#x4FE1;&#x606F;&lt;/h2&gt;</span><br><span class="line">              &lt;button onClick={this.add}&gt;&#x6DFB;&#x52A0;&#x4E00;&#x4E2A;&#x5C0F;&#x738B;&lt;/button&gt;</span><br><span class="line">              &lt;ul&gt;</span><br><span class="line">                {this.state.persons.map((personObj, index) =&gt; {</span><br><span class="line">                  return (</span><br><span class="line">                    &lt;li key={index}&gt;</span><br><span class="line">                      {personObj.name}----{personObj.age}</span><br><span class="line">                    &lt;/li&gt;</span><br><span class="line">                  );</span><br><span class="line">                })}</span><br><span class="line">              &lt;/ul&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">          );</span><br><span class="line">        }</span><br><span class="line">//&#x5C06;index&#x5F53;&#x6210;key&#x7684;&#x95EE;&#x9898;&#xFF0C;&#x65B0;&#x751F;&#x6210;&#x7684;&#x6570;&#x636E;&#x5B58;&#x653E;&#x987A;&#x5E8F;&#x6539;&#x53D8;&#xFF0C;index&#x5206;&#x914D;&#x6539;&#x53D8;&#xFF0C;&#x5BFC;&#x81F4;&#x6240;&#x6709;&#x6570;&#x636E;&#x91CD;&#x65B0;&#x751F;&#x6210;&#xFF0C;&#x865A;&#x62DF;DOM&#x65E0;&#x6CD5;&#x590D;&#x7528;</span><br><span class="line">&#x89E3;&#x51B3;:&#x4F7F;&#x7528;id&#x552F;&#x4E00;&#x6807;&#x8BC6;&#x4F5C;&#x4E3A;key</span><br></pre></td></tr></table></figure>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207021659962.png" alt="image-20220702165937916"></p>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207021659778.png" alt="image-20220702165950738"></p>
<p><strong>&#x9006;&#x5E8F;&#x6DFB;&#x52A0;&#x5BFC;&#x81F4;&#x6570;&#x636E;&#x9519;&#x4F4D;</strong></p>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207021650091.png" alt="image-20220702165001675"></p>
<p>1.&#x6700;&#x597D;&#x4F7F;&#x7528;&#x6BCF;&#x6761;&#x6570;&#x636E;&#x7684;&#x552F;&#x4E00;&#x6807;&#x8BC6;&#x4F5C;&#x4E3A;key&#xFF0C;&#x6BD4;&#x5982;id&#xFF0C;&#x624B;&#x673A;&#x53F7;&#x7B49;&#x552F;&#x4E00;&#x503C;</p>
<p>2.&#x5982;&#x679C;&#x786E;&#x5B9A;&#x53EA;&#x662F;&#x7B80;&#x5355;&#x7684;&#x5C55;&#x793A;&#x6570;&#x636E;&#xFF0C;&#x7528;index&#x4E5F;&#x53EF;&#x4EE5;</p>
<h2 id="3-React&#x5E94;&#x7528;"><a href="#3-React&#x5E94;&#x7528;" class="headerlink" title="3.React&#x5E94;&#x7528;"></a>3.React&#x5E94;&#x7528;</h2><h3 id="3-1-&#x811A;&#x624B;&#x67B6;"><a href="#3-1-&#x811A;&#x624B;&#x67B6;" class="headerlink" title="3.1.&#x811A;&#x624B;&#x67B6;"></a>3.1.&#x811A;&#x624B;&#x67B6;</h3><ol>
<li><p>&#x7528;&#x6765;&#x5E2E;&#x52A9;&#x7A0B;&#x5E8F;&#x5458;&#x5FEB;&#x901F;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x57FA;&#x4E8E;xxx&#x5E93;&#x7684;&#x6A21;&#x677F;&#x9879;&#x76EE;</p>
</li>
<li><p>&#x9879;&#x76EE;&#x7684;&#x6574;&#x4F53;&#x6280;&#x672F;&#x67B6;&#x6784;&#x4E3A;: react + webpack + es6 + eslint</p>
</li>
<li><p>&#x4F7F;&#x7528;&#x811A;&#x624B;&#x67B6;&#x5F00;&#x53D1;&#x7684;&#x9879;&#x76EE;&#x7684;&#x7279;&#x70B9;: &#x6A21;&#x5757;&#x5316;, &#x7EC4;&#x4EF6;&#x5316;, &#x5DE5;&#x7A0B;&#x5316;</p>
</li>
</ol>
<h3 id="3-2&#x7ED3;&#x6784;&#x4ECB;&#x7ECD;"><a href="#3-2&#x7ED3;&#x6784;&#x4ECB;&#x7ECD;" class="headerlink" title="3.2&#x7ED3;&#x6784;&#x4ECB;&#x7ECD;"></a>3.2&#x7ED3;&#x6784;&#x4ECB;&#x7ECD;</h3><p>React,Vue==&gt;SPA&#x7C7B;&#x578B;&#x2014;&gt;<strong>single,page,application &#x5355;&#x4E00;&#x9875;&#x9762;&#x5E94;&#x7528;</strong></p>
<p> public &#x2014;&#x2014; <strong>&#x9759;&#x6001;&#x8D44;&#x6E90;&#x6587;&#x4EF6;&#x5939;</strong></p>
<p>&#x200B;            favicon.icon &#x2014;&#x2014;&#x2014; &#x7F51;&#x7AD9;&#x9875;&#x7B7E;&#x56FE;&#x6807;</p>
<p>&#x200B;            <strong>index.html &#x2014;&#x2014;&#x2014;&#x2014;</strong> <strong>&#x4E3B;&#x9875;&#x9762;</strong></p>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207022140661.png" alt="image-20220702214009590"></p>
<p>&#x200B;            logo192.png &#x2014;&#x2014;&#x2014;- logo&#x56FE;</p>
<p>&#x200B;            logo512.png &#x2014;&#x2014;&#x2014;- logo&#x56FE;</p>
<p>&#x200B;            manifest.json &#x2014;&#x2014;- &#x5E94;&#x7528;&#x52A0;&#x58F3;&#x7684;&#x914D;&#x7F6E;&#x6587;&#x4EF6;</p>
<p>&#x200B;            robots.txt &#x2014;&#x2014;&#x2014;&#x2014; &#x722C;&#x866B;&#x534F;&#x8BAE;&#x6587;&#x4EF6;</p>
<p>src &#x2014;&#x2014; &#x6E90;&#x7801;&#x6587;&#x4EF6;&#x5939;</p>
<p>&#x200B;            App.css &#x2014;&#x2014;&#x2014;&#x2014; App&#x7EC4;&#x4EF6;&#x7684;&#x6837;&#x5F0F;</p>
<p>&#x200B;            <strong>App.js &#x2014;&#x2014;&#x2014;&#x2014;- App&#x7EC4;&#x4EF6;</strong></p>
<p>&#x200B;            App.test.js &#x2014;&#x2014; &#x7528;&#x4E8E;&#x7ED9;App&#x505A;&#x6D4B;&#x8BD5;</p>
<p>&#x200B;            index.css &#x2014;&#x2014;&#x2014; &#x6837;&#x5F0F;</p>
<p>&#x200B;            <strong>index.js &#x2014;&#x2014;&#x2014;-</strong> <strong>&#x5165;&#x53E3;&#x6587;&#x4EF6;</strong></p>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207031507222.png" alt="image-20220703150751131"></p>
<p>&#x200B;            logo.svg &#x2014;&#x2014;&#x2014;- logo&#x56FE;</p>
<p>&#x200B;            reportWebVitals.js</p>
<p>&#x200B;                    &#x2014;- &#x9875;&#x9762;&#x6027;&#x80FD;&#x5206;&#x6790;&#x6587;&#x4EF6;(&#x9700;&#x8981;web-vitals&#x5E93;&#x7684;&#x652F;&#x6301;)</p>
<p>&#x200B;            setupTests.js</p>
<p>&#x200B;                    &#x2014;&#x2014; &#x7EC4;&#x4EF6;&#x5355;&#x5143;&#x6D4B;&#x8BD5;&#x7684;&#x6587;&#x4EF6;(&#x9700;&#x8981;jest-dom&#x5E93;&#x7684;&#x652F;&#x6301;)</p>
<h3 id="3-3-&#x4F8B;&#x5B50;"><a href="#3-3-&#x4F8B;&#x5B50;" class="headerlink" title="3.3 &#x4F8B;&#x5B50;"></a>3.3 &#x4F8B;&#x5B50;</h3><p><strong>&#x81EA;&#x5B9A;&#x4E49;&#x811A;&#x624B;&#x67B6;&#x6240;&#x9700;&#x7684;&#x4E1C;&#x897F; public&#x548C;src&#x91CC;&#x9762;</strong></p>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207031554712.png" alt="image-20220703155444667"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">App</span>.<span class="property">js</span>&#x91CC;</span><br><span class="line"><span class="comment">// &#x521B;&#x5EFA;&#x5916;&#x58F3;&#x7EC4;&#x4EF6;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&quot;react&quot;</span>;<span class="comment">//react&#x91CC;&#x9762;&#x6709;&#x591A;&#x4E2A;&#x66B4;&#x9732;&#x653E;</span></span><br><span class="line"><span class="comment">//&#x4F18;&#x5316; import React,{Component}from &apos;react&apos;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> <span class="title class_">App</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span>{</span><br><span class="line">    <span class="title function_">render</span>(<span class="params"></span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="keyword">return</span>(</span><br><span class="line">           <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">            <span class="tag">&lt;<span class="name">Hello</span>/&gt;</span>//&#x5355;&#x72EC;&#x7EC4;&#x4EF6;</span></span><br><span class="line"><span class="language-xml">           <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">        )</span><br><span class="line">    }</span><br><span class="line">} </span><br><span class="line"></span><br><span class="line">-----------</span><br><span class="line"><span class="comment">// &#x66B4;&#x9732;App&#x7EC4;&#x4EF6;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="title class_">App</span> <span class="comment">//&#x66F4;&#x6362;&#x5230;&#x521B;&#x5EFA;&#x7C7B;&#x5F00;&#x5934;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">index.<span class="property">js</span> &#x5165;&#x53E3;&#x6587;&#x4EF6;</span><br><span class="line"></span><br><span class="line"><span class="comment">// &#x5F15;&#x5165;React&#x6838;&#x5FC3;&#x5E93;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&apos;react&apos;</span></span><br><span class="line"><span class="comment">// &#x5F15;&#x5165;ReactDOM</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ReactDOM</span> <span class="keyword">from</span> <span class="string">&apos;react-dom/client&apos;</span></span><br><span class="line"><span class="comment">// &#x5F15;&#x5165;App&#x7EC4;&#x4EF6;</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&apos;./App&apos;</span></span><br><span class="line"><span class="comment">// &#x6E32;&#x67D3;App&#x5230;&#x9875;&#x9762;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#x6CE8;&#x610F;:&#x65B0;&#x7248;react&#x4E0D;&#x652F;&#x6301; <span class="title class_">ReatDOM</span>.<span class="title function_">render</span>(xxx),&#x4F7F;&#x7528;createRoot,&#x4E14;&#x5F15;&#x5165;react-dom/client</span><br><span class="line"><span class="keyword">const</span> root = <span class="title class_">ReactDOM</span>.<span class="title function_">createRoot</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;root&quot;</span>));</span><br><span class="line">root.<span class="title function_">render</span>(</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">React.StrictMode</span>&gt;</span>  </span></span><br><span class="line"><span class="language-xml">    {/* &#x4EE3;&#x7801;&#x7684;&#x68C0;&#x67E5; */}</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">App</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">React.StrictMode</span>&gt;</span></span></span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<p>&#x5C06;&#x7EC4;&#x4EF6;&#x540E;&#x7F00;&#x6539;&#x6210;jsx&#x548C;&#x666E;&#x901A;js&#x6587;&#x4EF6;&#x8FDB;&#x884C;&#x533A;&#x5206;&#xFF0C;React&#x811A;&#x624B;&#x67B6;&#x91CC;&#x9762;<strong>js&#x548C;jsx&#x7684;&#x540E;&#x7F00;&#x90FD;&#x53EF;&#x4EE5;&#x7701;&#x7565;</strong></p>
<h3 id="3-4&#x6837;&#x5F0F;&#x7684;&#x6A21;&#x5757;&#x5316;"><a href="#3-4&#x6837;&#x5F0F;&#x7684;&#x6A21;&#x5757;&#x5316;" class="headerlink" title="3.4&#x6837;&#x5F0F;&#x7684;&#x6A21;&#x5757;&#x5316;"></a>3.4&#x6837;&#x5F0F;&#x7684;&#x6A21;&#x5757;&#x5316;</h3><p>&#x5982;&#x679C;&#x4E0D;&#x540C;&#x7EC4;&#x4EF6;&#x7684;&#x6837;&#x5F0F;&#x66F4;&#x6539;&#x540D;&#x4E00;&#x81F4;&#xFF0C;&#x90A3;&#x4E48;&#x540E;&#x7EED;&#x5BFC;&#x5165;&#x7684;&#x7EC4;&#x4EF6;&#x6837;&#x5F0F;&#x4F1A;&#x8986;&#x76D6;&#x524D;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;</p>
<h4 id="1-&#x66F4;&#x6362;css&#x7684;&#x547D;&#x540D;"><a href="#1-&#x66F4;&#x6362;css&#x7684;&#x547D;&#x540D;" class="headerlink" title="1.&#x66F4;&#x6362;css&#x7684;&#x547D;&#x540D;"></a>1.&#x66F4;&#x6362;css&#x7684;&#x547D;&#x540D;</h4><p>&#x4F46;&#x662F;&#x4E3A;&#x4E86;&#x5C06;&#x6837;&#x5F0F;&#x6A21;&#x5757;&#x5316;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x5C06;&#x6837;&#x5F0F;&#x6587;&#x4EF6;&#x4EE5;<code>.module.css</code>&#x4F5C;&#x4E3A;&#x540E;&#x7F00;</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x7EC4;&#x4EF6;&#x91CC;</span><br><span class="line"><span class="keyword">import</span> hello <span class="keyword">from</span> <span class="string">&apos;./index.module.css&apos;</span></span><br><span class="line">&lt;h2 className={hello.<span class="property">title</span>}&gt;&lt;/h2&gt;</span><br><span class="line"></span><br><span class="line">css&#x91CC;</span><br><span class="line">.<span class="property">title</span> {</span><br><span class="line">    font-<span class="attr">size</span>:35px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>2.&#x7528;less,scss&#x9884;&#x5904;&#x7406;</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.<span class="property">hello</span>{</span><br><span class="line">    .<span class="property">title</span></span><br><span class="line">    {</span><br><span class="line">        xxx</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h3 id="3-5&#x529F;&#x80FD;&#x754C;&#x9762;&#x7684;&#x7EC4;&#x4EF6;&#x5316;&#x7F16;&#x7801;&#x6D41;&#x7A0B;&#xFF08;&#x901A;&#x7528;&#xFF09;"><a href="#3-5&#x529F;&#x80FD;&#x754C;&#x9762;&#x7684;&#x7EC4;&#x4EF6;&#x5316;&#x7F16;&#x7801;&#x6D41;&#x7A0B;&#xFF08;&#x901A;&#x7528;&#xFF09;" class="headerlink" title="3.5&#x529F;&#x80FD;&#x754C;&#x9762;&#x7684;&#x7EC4;&#x4EF6;&#x5316;&#x7F16;&#x7801;&#x6D41;&#x7A0B;&#xFF08;&#x901A;&#x7528;&#xFF09;"></a>3.5&#x529F;&#x80FD;&#x754C;&#x9762;&#x7684;&#x7EC4;&#x4EF6;&#x5316;&#x7F16;&#x7801;&#x6D41;&#x7A0B;&#xFF08;&#x901A;&#x7528;&#xFF09;</h3><ol>
<li><p>&#x62C6;&#x5206;&#x7EC4;&#x4EF6;: &#x62C6;&#x5206;&#x754C;&#x9762;,&#x62BD;&#x53D6;&#x7EC4;&#x4EF6;</p>
</li>
<li><p>&#x5B9E;&#x73B0;&#x9759;&#x6001;&#x7EC4;&#x4EF6;: &#x4F7F;&#x7528;&#x7EC4;&#x4EF6;&#x5B9E;&#x73B0;&#x9759;&#x6001;&#x9875;&#x9762;&#x6548;&#x679C;</p>
</li>
<li><p>&#x5B9E;&#x73B0;&#x52A8;&#x6001;&#x7EC4;&#x4EF6;</p>
</li>
</ol>
<p>&#x200B;        3.1 &#x52A8;&#x6001;&#x663E;&#x793A;&#x521D;&#x59CB;&#x5316;&#x6570;&#x636E;</p>
<p>&#x200B;            3.1.1 &#x6570;&#x636E;&#x7C7B;&#x578B;</p>
<p>&#x200B;            3.1.2 &#x6570;&#x636E;&#x540D;&#x79F0;</p>
<p>&#x200B;            3.1.3&#x4FDD;&#x5B58;&#x5728;&#x54EA;&#x4E2A;&#x7EC4;&#x4EF6;?</p>
<p>&#x200B;        3.2 &#x4EA4;&#x4E92;(&#x4ECE;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x76D1;&#x542C;&#x5F00;&#x59CB;)</p>
<h3 id="3-6&#x6848;&#x4F8B;"><a href="#3-6&#x6848;&#x4F8B;" class="headerlink" title="3.6&#x6848;&#x4F8B;"></a>3.6&#x6848;&#x4F8B;</h3><p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207031748444.jpg" alt="&#x5C4F;&#x5E55;&#x622A;&#x56FE; 2022-07-03 174708"></p>
<p>&#x62C6;&#x5206;&#x4E3A;&#x56DB;&#x4E2A;&#x7EC4;&#x4EF6;Header,List,Item,Footer</p>
<p>&#x6CE8;&#x610F;&#x70B9;:</p>
<p>1.&#x5C06;&#x6240;&#x6709;&#x5171;&#x7528;&#x7684;&#x6570;&#x636E;&#x8BBE;&#x7F6E;&#x5728;&#x7236;&#x7EC4;&#x4EF6;&#x5185;&#xFF0C;&#x65B9;&#x4FBF;&#x4F20;&#x9012;</p>
<p>2.&#x5B50;&#x4F20;&#x7236;&#x548C;&#x7236;&#x4F20;&#x5B50;</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> <span class="title class_">App</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span> {</span><br><span class="line">  state={<span class="attr">todos</span>:[</span><br><span class="line">    {<span class="attr">id</span>:<span class="string">&apos;001&apos;</span>,<span class="attr">name</span>:<span class="string">&apos;&#x5403;&#x996D;&apos;</span>,<span class="attr">done</span>:<span class="literal">true</span>},</span><br><span class="line">    {<span class="attr">id</span>:<span class="string">&apos;002&apos;</span>,<span class="attr">name</span>:<span class="string">&apos;&#x6253;&#x4EE3;&#x7801;&apos;</span>,<span class="attr">done</span>:<span class="literal">false</span>},</span><br><span class="line">  ]}</span><br><span class="line">    <span class="comment">//&#x4F7F;&#x5F97;&#x7236;&#x7EC4;&#x4EF6;&#x62FF;&#x5230;&#x5B50;&#x7EC4;&#x4EF6;&#x7684;&#x5C5E;&#x6027;</span></span><br><span class="line">  a =<span class="function">(<span class="params">data</span>) =&gt;</span> {</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(data);</span><br><span class="line">  }</span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>) {</span><br><span class="line">    <span class="keyword">const</span>{todos}=<span class="variable language_">this</span>.<span class="property">state</span></span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;todo-container&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">className</span>=<span class="string">&quot;todo-wrap&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">Header</span> <span class="attr">a</span>=<span class="string">{this.a}/</span>&gt;</span> //&#x5B50;&#x4F20;&#x7236; &#x5229;&#x7528;&#x4E00;&#x4E2A;&#x51FD;&#x6570;</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">List</span>  <span class="attr">todos</span>=<span class="string">{todos}/</span>&gt;</span> //&#x7236;&#x4F20;&#x5B50; &#x76F4;&#x63A5;&#x4F20;&#x5165;props</span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">Footer</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">    );</span><br><span class="line">  }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">---------------------</span><br><span class="line">    <span class="title class_">Header</span>.<span class="property">js</span></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">class</span> <span class="title class_">Header</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Component</span> {</span><br><span class="line">  handleKeyUp=<span class="function">(<span class="params">event</span>)=&gt;</span></span><br><span class="line">  {</span><br><span class="line">    <span class="keyword">const</span>{keyCode,target}=event</span><br><span class="line">    <span class="keyword">if</span>(keyCode!=<span class="number">13</span>)</span><br><span class="line">    {</span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">props</span>.<span class="title function_">a</span>(target.<span class="property">value</span>) <span class="comment">//&#x5229;&#x7528;props&#x91CC;&#x7684;&#x5C5E;&#x6027;</span></span><br><span class="line">    }<span class="keyword">else</span></span><br><span class="line">    {</span><br><span class="line">      <span class="keyword">return</span> </span><br><span class="line">    }</span><br><span class="line">  }</span><br></pre></td></tr></table></figure>
<p>3.&#x9F20;&#x6807;&#x79FB;&#x5165;&#x79FB;&#x51FA;&#x6548;&#x679C;</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">   item   </span><br><span class="line">  state = { <span class="title class_">Mouse</span>: <span class="literal">false</span> };</span><br><span class="line">  <span class="comment">// &#x9F20;&#x6807;&#x79FB;&#x5165;&#x79FB;&#x51FA;&#x7684;&#x56DE;&#x8C03;</span></span><br><span class="line">  handleMouse = <span class="function">(<span class="params">flag</span>) =&gt;</span> {</span><br><span class="line">    <span class="keyword">return</span> <span class="function">() =&gt;</span> {</span><br><span class="line">      <span class="variable language_">this</span>.<span class="title function_">setState</span>({ <span class="title class_">Mouse</span>: flag });</span><br><span class="line">    };</span><br><span class="line">  };</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">li</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">style</span>=<span class="string">{{</span> <span class="attr">backgroundColor:</span> <span class="attr">Mouse</span> ? &quot;<span class="attr">gray</span>&quot; <span class="attr">:</span> &quot;<span class="attr">white</span>&quot; }}</span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">onMouseLeave</span>=<span class="string">{this.handleMouse(false)}</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">          <span class="attr">onMouseEnter</span>=<span class="string">{this.handleMouse(true)}</span></span></span></span><br><span class="line"><span class="tag"><span class="language-xml">        &gt;</span></span></span><br></pre></td></tr></table></figure>
<p>4.&#x6DFB;&#x52A0;todo</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">App</span>.<span class="property">jsx</span></span><br><span class="line">  addTodo = <span class="function">(<span class="params">todoObj</span>) =&gt;</span> {</span><br><span class="line">    <span class="keyword">const</span> { todos } = <span class="variable language_">this</span>.<span class="property">state</span>;</span><br><span class="line">    <span class="keyword">const</span> newTodos = [todoObj, ...todos];</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">setState</span>({ <span class="attr">todos</span>: newTodos });</span><br><span class="line">  };</span><br><span class="line">          <span class="language-xml"><span class="tag">&lt;<span class="name">Header</span> <span class="attr">addTodo</span>=<span class="string">{this.addTodo}</span> /&gt;</span></span></span><br><span class="line">              </span><br><span class="line"> <span class="title class_">Header</span></span><br><span class="line">  handleKeyUp = <span class="function">(<span class="params">event</span>) =&gt;</span> {</span><br><span class="line">    <span class="keyword">const</span> { keyCode, target } = event;</span><br><span class="line">    <span class="keyword">if</span> (keyCode !== <span class="number">13</span>) {</span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">if</span> (target.<span class="property">value</span> === <span class="string">&quot;&quot;</span>) {</span><br><span class="line">      <span class="title function_">alert</span>(<span class="string">&quot;&#x8F93;&#x5165;&#x4E0D;&#x80FD;&#x7A7A;&quot;</span>);</span><br><span class="line">      <span class="keyword">return</span>;</span><br><span class="line">    }</span><br><span class="line">      <span class="comment">//nanoid &#x751F;&#x6210;&#x552F;&#x4E00;&#x5E8F;&#x5217;&#x53F7;</span></span><br><span class="line">    <span class="keyword">const</span> todoObj = { <span class="attr">id</span>: <span class="title function_">nanoid</span>(), <span class="attr">name</span>: target.<span class="property">value</span>, <span class="attr">done</span>: <span class="literal">false</span> };</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">props</span>.<span class="title function_">addTodo</span>(todoObj); <span class="comment">//&#x5229;&#x7528;prosps&#x7684;&#x51FD;&#x6570;&#xFF0C;&#x4F20;&#x5165;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;</span></span><br><span class="line">    target.<span class="property">value</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line">  };</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>&#x66F4;&#x65B0;&#x52FE;&#x9009;&#x72B6;&#x6001;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">App.jsx</span><br><span class="line">  changeTodo = (id, done) =&gt; {</span><br><span class="line">    const { todos } = this.state;</span><br><span class="line">    const newTodos = todos.map((todoObj) =&gt; {</span><br><span class="line">        //&#x901A;&#x8FC7;id&#x6765;&#x66F4;&#x65B0;</span><br><span class="line">      if (todoObj.id === id) {</span><br><span class="line">        return { ...todoObj, done }; ///&#x6CE8;&#x610F;&#x8FD9;&#x91CC;&#x7684;&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;</span><br><span class="line">      } else {</span><br><span class="line">        return todoObj;</span><br><span class="line">      }</span><br><span class="line">    });</span><br><span class="line">    this.setState({ todos: newTodos });</span><br><span class="line">  };</span><br><span class="line"></span><br><span class="line">          &lt;List</span><br><span class="line">            todos={todos}</span><br><span class="line">            changeTodo={this.changeTodo}</span><br><span class="line">            DeleteTodo={this.DeleteTodo}</span><br><span class="line">          /&gt;</span><br><span class="line"></span><br><span class="line">item</span><br><span class="line">          &lt;label&gt;</span><br><span class="line">            {/* &#x5F00;&#x59CB;&#x9ED8;&#x8BA4;&#x7684;&#x52FE;&#x9009;&#xFF0C;&#x5982;&#x679C;&#x53EA;&#x7528;checked&#x662F;&#x53EA;&#x8BFB;&#x4E86;&#xFF0C;&#x4F46;&#x540E;&#x7EED;&#x6709;bug */}</span><br><span class="line">            &lt;input</span><br><span class="line">              type=&quot;checkbox&quot;</span><br><span class="line">              checked={done}</span><br><span class="line">              onChange={this.handleCheck(id)}</span><br><span class="line">            /&gt;</span><br><span class="line">            &lt;span&gt;{name}&lt;/span&gt;</span><br><span class="line">          &lt;/label&gt;</span><br><span class="line"></span><br><span class="line">  // &#x52FE;&#x9009;</span><br><span class="line">  handleCheck = (id) =&gt; {</span><br><span class="line">    return (event) =&gt; {</span><br><span class="line">      this.props.changeTodo(id, event.target.checked);</span><br><span class="line">    };</span><br><span class="line">  };</span><br></pre></td></tr></table></figure>
<p>&#x5220;&#x9664;todo</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">item.<span class="property">jsx</span></span><br><span class="line">          &lt;button</span><br><span class="line">            onClick={<span class="function">() =&gt;</span> {<span class="variable language_">this</span>.<span class="title function_">handleDelete</span>(id)}}</span><br><span class="line">            className=<span class="string">&quot;btn btn-danger&quot;</span></span><br><span class="line">            style={{ <span class="attr">display</span>: <span class="title class_">Mouse</span> ? <span class="string">&quot;block&quot;</span> : <span class="string">&quot;none&quot;</span> }}</span><br><span class="line">          &gt;</span><br><span class="line">            &#x5220;&#x9664;</span><br><span class="line">          &lt;/button&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  handleDelete = <span class="function">(<span class="params">id</span>) =&gt;</span> {</span><br><span class="line">    <span class="keyword">if</span>(<span class="variable language_">window</span>.<span class="title function_">confirm</span>(<span class="string">&apos;&#x786E;&#x5B9A;&#x5220;&#x9664;&#x5417;&#xFF1F;&apos;</span>)) <span class="comment">//&#x8FD9;&#x91CC;&#x7684;confirm&#x9700;&#x8981;&#x52A0;window&#xFF0C;&#x5426;&#x5219;&#x4F1A;&#x62A5;&#x9519;</span></span><br><span class="line">    {</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">props</span>.<span class="title class_">DeleteTodo</span>(id)</span><br><span class="line">    }<span class="keyword">else</span>{</span><br><span class="line">      <span class="keyword">return</span> </span><br><span class="line">    }</span><br><span class="line"></span><br><span class="line">  };</span><br><span class="line"></span><br><span class="line"><span class="title class_">App</span>.<span class="property">jsx</span></span><br><span class="line">  <span class="comment">// &#x5220;&#x9664;&#x4E00;&#x4E2A;todo</span></span><br><span class="line">  <span class="title class_">DeleteTodo</span> = <span class="function">(<span class="params">id</span>) =&gt;</span> {</span><br><span class="line">    <span class="keyword">const</span> { todos } = <span class="variable language_">this</span>.<span class="property">state</span>;</span><br><span class="line">    <span class="keyword">const</span> newTodo = todos.<span class="title function_">filter</span>(<span class="function">(<span class="params">todoObj</span>) =&gt;</span> {</span><br><span class="line">      <span class="keyword">return</span> todoObj.<span class="property">id</span> !== id;</span><br><span class="line">    });</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">setState</span>({ <span class="attr">todos</span>: newTodo });</span><br><span class="line">  };</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>&#x5B9E;&#x73B0;&#x5E95;&#x90E8;&#x529F;&#x80FD;</p>
<p>&#x5168;&#x9009;</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">App</span>.<span class="property">jsx</span>  </span><br><span class="line"><span class="comment">// &#x5168;&#x9009;</span></span><br><span class="line">  checkAlltodo = <span class="function">(<span class="params">done</span>) =&gt;</span> {</span><br><span class="line">    <span class="keyword">const</span> { todos } = <span class="variable language_">this</span>.<span class="property">state</span>;</span><br><span class="line">    <span class="keyword">const</span> newTodos = todos.<span class="title function_">map</span>(<span class="function">(<span class="params">todoObj</span>) =&gt;</span> {</span><br><span class="line">      <span class="keyword">return</span> { ...todoObj, done};</span><br><span class="line">    });</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">setState</span>({ <span class="attr">todos</span>: newTodos });</span><br><span class="line">  };</span><br><span class="line"></span><br><span class="line">  <span class="comment">// &#x6E05;&#x695A;&#x5DF2;&#x5B8C;&#x6210;&#x7684;</span></span><br><span class="line">  clearAllDone= <span class="function">(<span class="params">done</span>) =&gt;</span> {</span><br><span class="line">    <span class="keyword">const</span>{todos}=<span class="variable language_">this</span>.<span class="property">state</span></span><br><span class="line">    <span class="keyword">const</span> newTodos=todos.<span class="title function_">filter</span>( <span class="function">(<span class="params">todoObj</span>) =&gt;</span> {</span><br><span class="line">      <span class="keyword">return</span> !todoObj.<span class="property">done</span></span><br><span class="line">    })</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">setState</span>({<span class="attr">todos</span>:newTodos})</span><br><span class="line">  }</span><br><span class="line">--------------------------------</span><br><span class="line">footer.<span class="property">jsx</span></span><br><span class="line">  handleCheckAll= <span class="function">(<span class="params">event</span>) =&gt;</span> {</span><br><span class="line">      <span class="variable language_">this</span>.<span class="property">props</span>.<span class="title function_">checkAlltodo</span>(event.<span class="property">target</span>.<span class="property">checked</span>) <span class="comment">//&#x5168;&#x9009;&#x7684;&#x52FE;&#x9009;&#x51B3;&#x5B9A;&#x5168;&#x90E8;&#x7684;&#x52FE;&#x9009;</span></span><br><span class="line">  }</span><br><span class="line">    handleClearAllDone= <span class="function">() =&gt;</span> {</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">props</span>.<span class="title function_">clearAllDone</span>()</span><br><span class="line">  }</span><br><span class="line">  <span class="title function_">render</span>(<span class="params"></span>){</span><br><span class="line">     <span class="keyword">const</span> { todos } = <span class="variable language_">this</span>.<span class="property">props</span>;</span><br><span class="line">    <span class="comment">// &#x603B;&#x6570;</span></span><br><span class="line">    <span class="keyword">const</span> total = todos.<span class="property">length</span>;</span><br><span class="line">    <span class="comment">// // &#x5DF2;&#x5B8C;&#x6210;&#x7684;&#x4E2A;&#x6570;</span></span><br><span class="line">    <span class="keyword">const</span> doneCount = todos.<span class="title function_">reduce</span>(<span class="function">(<span class="params">pre, todo</span>) =&gt;</span> (pre + (todo.<span class="property">done</span> ? <span class="number">1</span> : <span class="number">0</span>)), <span class="number">0</span>);</span><br><span class="line">    <span class="comment">// const doneCount=todos.filter(p=&gt;p.done).length</span></span><br><span class="line">  }</span><br></pre></td></tr></table></figure>
<p>confirm,filter,reduce</p>
<p>reduce&#x51FD;&#x6570;</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#x4E00;&#x4E2A; &#x201C;reducer&#x201D; &#x51FD;&#x6570;&#xFF0C;&#x5305;&#x542B;&#x56DB;&#x4E2A;&#x53C2;&#x6570;&#xFF1A;</span><br><span class="line"></span><br><span class="line">previousValue&#xFF1A;&#x4E0A;&#x4E00;&#x6B21;&#x8C03;&#x7528; callbackFn &#x65F6;&#x7684;&#x8FD4;&#x56DE;&#x503C;&#x3002;&#x5728;&#x7B2C;&#x4E00;&#x6B21;&#x8C03;&#x7528;&#x65F6;&#xFF0C;&#x82E5;&#x6307;&#x5B9A;&#x4E86;&#x521D;&#x59CB;&#x503C; initialValue&#xFF0C;&#x5176;&#x503C;&#x5219;&#x4E3A; initialValue&#xFF0C;&#x5426;&#x5219;&#x4E3A;&#x6570;&#x7EC4;&#x7D22;&#x5F15;&#x4E3A; <span class="number">0</span> &#x7684;&#x5143;&#x7D20; array[<span class="number">0</span>]&#x3002;</span><br><span class="line"></span><br><span class="line">currentValue&#xFF1A;&#x6570;&#x7EC4;&#x4E2D;&#x6B63;&#x5728;&#x5904;&#x7406;&#x7684;&#x5143;&#x7D20;&#x3002;&#x5728;&#x7B2C;&#x4E00;&#x6B21;&#x8C03;&#x7528;&#x65F6;&#xFF0C;&#x82E5;&#x6307;&#x5B9A;&#x4E86;&#x521D;&#x59CB;&#x503C; initialValue&#xFF0C;&#x5176;&#x503C;&#x5219;&#x4E3A;&#x6570;&#x7EC4;&#x7D22;&#x5F15;&#x4E3A; <span class="number">0</span> &#x7684;&#x5143;&#x7D20; array[<span class="number">0</span>]&#xFF0C;&#x5426;&#x5219;&#x4E3A; array[<span class="number">1</span>]&#x3002;</span><br><span class="line"></span><br><span class="line">currentIndex&#xFF1A;&#x6570;&#x7EC4;&#x4E2D;&#x6B63;&#x5728;&#x5904;&#x7406;&#x7684;&#x5143;&#x7D20;&#x7684;&#x7D22;&#x5F15;&#x3002;&#x82E5;&#x6307;&#x5B9A;&#x4E86;&#x521D;&#x59CB;&#x503C; initialValue&#xFF0C;&#x5219;&#x8D77;&#x59CB;&#x7D22;&#x5F15;&#x53F7;&#x4E3A; <span class="number">0</span>&#xFF0C;&#x5426;&#x5219;&#x4ECE;&#x7D22;&#x5F15; <span class="number">1</span> &#x8D77;&#x59CB;&#x3002;</span><br><span class="line">		</span><br><span class="line">array&#xFF1A;&#x7528;&#x4E8E;&#x904D;&#x5386;&#x7684;&#x6570;&#x7EC4;&#x3002;</span><br></pre></td></tr></table></figure>
<p>&#x7BAD;&#x5934;&#x51FD;&#x6570;</p>
<p>&#x83B7;&#x53D6;&#x5DF2;&#x5B8C;&#x6210;&#x7684;&#x6570;&#x91CF;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#x5F39;&#x5E55;--&gt;&#x4F7F;&#x7528;filter&#x8FC7;&#x6EE4;</span><br><span class="line">todos.filter(p=&gt;p.done).length</span><br><span class="line"></span><br><span class="line">//filter&#x5360;&#x5185;&#x5B58; reduce&#x6027;&#x80FD;&#x9AD8;&#xFF1F;&#xFF1F;&#xFF1F;</span><br></pre></td></tr></table></figure>
<h4 id="3-6-1&#x603B;&#x7ED3;"><a href="#3-6-1&#x603B;&#x7ED3;" class="headerlink" title="3.6.1&#x603B;&#x7ED3;"></a>3.6.1&#x603B;&#x7ED3;</h4><p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207041108556.png" alt="image-20220704110811120"></p>
<h2 id="4-react-ajax"><a href="#4-react-ajax" class="headerlink" title="4.react ajax"></a>4.react ajax</h2><h3 id="1-&#x914D;&#x7F6E;&#x4EE3;&#x7406;"><a href="#1-&#x914D;&#x7F6E;&#x4EE3;&#x7406;" class="headerlink" title="1.&#x914D;&#x7F6E;&#x4EE3;&#x7406;"></a>1.&#x914D;&#x7F6E;&#x4EE3;&#x7406;</h3><h4 id="1-1&#x65B9;&#x6CD5;1-proxy"><a href="#1-1&#x65B9;&#x6CD5;1-proxy" class="headerlink" title="1.1&#x65B9;&#x6CD5;1 proxy"></a>1.1&#x65B9;&#x6CD5;1 proxy</h4><p>&#x56E0;&#x4E3A;&#x8DE8;&#x57DF;&#x95EE;&#x9898;&#xFF0C;&#x5BA2;&#x6237;&#x7AEF;&#x53EF;&#x4EE5;&#x8BBF;&#x95EE;&#x670D;&#x52A1;&#x7AEF;&#xFF0C;&#x4F46;&#x662F;&#x56E0;&#x4E3A;&#x8DE8;&#x57DF;&#x95EE;&#x9898;&#xFF0C;&#x6570;&#x636E;&#x65E0;&#x6CD5;&#x8FD4;&#x56DE;&#x3002;&#x6240;&#x4EE5;&#x9700;&#x8981;&#x4E00;&#x4E2A;&#x4EE3;&#x7406;&#xFF0C;&#x8DE8;&#x57DF;&#x7684;&#x672C;&#x8D28;&#x662F;ajax&#x5F15;&#x64CE;&#xFF0C;&#x800C;&#x914D;&#x7F6E;&#x7684;&#x4EE3;&#x7406;&#x6CA1;&#x6709;&#xFF0C;&#x6240;&#x4EE5;&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#x8DE8;&#x57DF;&#x3002;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&#x670D;&#x52A1;&#x7AEF;&#x662F;http://localhost:5000/students</span><br><span class="line"></span><br><span class="line">&#x5BA2;&#x6237;&#x7AEF;&#x662F;3000&#x7AEF;&#x53E3;</span><br><span class="line">&#x5728;&#x5BA2;&#x6237;&#x7AEF;&#x7684;package.json&#x91CC;&#x6DFB;&#x52A0;</span><br><span class="line">  &quot;proxy&quot;:&quot;http://localhost:5000&quot; &#x7136;&#x540E;&#x91CD;&#x542F;react&#x624D;&#x80FD;&#x6267;&#x884C;</span><br><span class="line">  </span><br><span class="line">App.jsx</span><br><span class="line">export default class App extends Component {</span><br><span class="line">  getStudentData = () =&gt; {</span><br><span class="line">      //&#x7136;&#x540E;&#x8FD9;&#x91CC;&#x7684;&#x8BF7;&#x6C42;&#x5C31;&#x662F;&#x76F4;&#x63A5;&#x4F20;&#x7ED9;3000&#x7AEF;&#x53E3;&#xFF0C;&#x7ECF;&#x8FC7;&#x4EE3;&#x7406;&#x4F20;&#x7ED9;&#x4E86;5000&#x7AEF;&#x53E3;</span><br><span class="line">    axios.get(&quot;http://localhost:3000/students&quot;).then(</span><br><span class="line">      (response) =&gt; {</span><br><span class="line">        console.log(&quot;&#x6210;&#x529F;&#x4E86;&quot;, response.data);</span><br><span class="line">      },</span><br><span class="line">      (error) =&gt; {</span><br><span class="line">        console.log(&quot;&#x5931;&#x8D25;&#x4E86;&quot;, error.data);</span><br><span class="line">      }</span><br><span class="line">    );</span><br><span class="line">  };</span><br><span class="line">  render() {</span><br><span class="line">    return (</span><br><span class="line">      &lt;div&gt;</span><br><span class="line">        &lt;button onClick={this.getStudentData}&gt;&#x70B9;&#x51FB;&#x83B7;&#x53D6;&#x6570;&#x636E;&lt;/button&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    );</span><br><span class="line">  }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>&#x8BF4;&#x660E;&#xFF1A;</p>
<ol>
<li>&#x4F18;&#x70B9;&#xFF1A;&#x914D;&#x7F6E;&#x7B80;&#x5355;&#xFF0C;&#x524D;&#x7AEF;&#x8BF7;&#x6C42;&#x8D44;&#x6E90;&#x65F6;&#x53EF;&#x4EE5;&#x4E0D;&#x52A0;&#x4EFB;&#x4F55;&#x524D;&#x7F00;&#x3002;</li>
<li>&#x7F3A;&#x70B9;&#xFF1A;&#x4E0D;&#x80FD;&#x914D;&#x7F6E;&#x591A;&#x4E2A;&#x4EE3;&#x7406;&#x3002;</li>
<li>&#x5DE5;&#x4F5C;&#x65B9;&#x5F0F;&#xFF1A;&#x4E0A;&#x8FF0;&#x65B9;&#x5F0F;&#x914D;&#x7F6E;&#x4EE3;&#x7406;&#xFF0C;&#x5F53;&#x8BF7;&#x6C42;&#x4E86;3000&#x4E0D;&#x5B58;&#x5728;&#x7684;&#x8D44;&#x6E90;&#x65F6;&#xFF0C;&#x90A3;&#x4E48;&#x8BE5;&#x8BF7;&#x6C42;&#x4F1A;&#x8F6C;&#x53D1;&#x7ED9;5000 &#xFF08;&#x4F18;&#x5148;&#x5339;&#x914D;&#x524D;&#x7AEF;&#x8D44;&#x6E90;&#xFF09;</li>
</ol>
<h4 id="1-2&#x65B9;&#x6CD5;-&#x914D;&#x7F6E;setupProxy-js"><a href="#1-2&#x65B9;&#x6CD5;-&#x914D;&#x7F6E;setupProxy-js" class="headerlink" title="1.2&#x65B9;&#x6CD5; &#x914D;&#x7F6E;setupProxy.js"></a>1.2&#x65B9;&#x6CD5; &#x914D;&#x7F6E;setupProxy.js</h4><p>&#x5F53;&#x5B58;&#x5728;&#x591A;&#x4E2A;&#x670D;&#x52A1;&#x5668;&#x7AEF;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">//&#x4F4E;&#x7248;&#x672C;</span><br><span class="line">const { proxy } = require(&quot;http-proxy-middleware&quot;);</span><br><span class="line">//http-proxy-middleware &#x9AD8;&#x7248;&#x672C;</span><br><span class="line">const { createProxyMiddleware:proxy } = require(&quot;http-proxy-middleware&quot;);</span><br><span class="line">module.exports = function (app) {</span><br><span class="line">  app.use(</span><br><span class="line">    proxy(&quot;/api1&quot;, {//&#x9047;&#x89C1;api1&#x524D;&#x7F00;&#x7684;&#x8BF7;&#x6C42;&#xFF0C;&#x5C31;&#x4F1A;&#x89E6;&#x53D1;&#x8BE5;&#x4EE3;&#x7406;&#x914D;&#x7F6E;</span><br><span class="line">      target: &quot;http://localhost:5000&quot;,//&#x8BF7;&#x6C42;&#x8F6C;&#x53D1;&#x7ED9;&#x8C01;</span><br><span class="line">      changeOrigin: true, //&#x9ED8;&#x8BA4;&#x503C;false&#xFF0C;&#x63A7;&#x5236;&#x670D;&#x52A1;&#x5668;&#x6536;&#x5230;&#x7684;&#x8BF7;&#x6C42;&#x5934;&#x4E2D;Host&#x5B57;&#x6BB5;&#x7684;&#x503C;</span><br><span class="line">        /*</span><br><span class="line">         &#x670D;&#x52A1;&#x7AEF;</span><br><span class="line">      	console.log(&apos;&#x8BF7;&#x6C42;&#x6765;&#x81EA;&#x4E8E;&apos;,request.get(&apos;Host&apos;));</span><br><span class="line">      	</span><br><span class="line">        changeOrigin&#x8BBE;&#x7F6E;&#x4E3A;true&#x65F6;&#xFF0C;&#x670D;&#x52A1;&#x5668;&#x6536;&#x5230;&#x7684;&#x8BF7;&#x6C42;&#x5934;&#x4E2D;&#x7684;host&#x4E3A;&#xFF1A;localhost:5000</span><br><span class="line">      	changeOrigin&#x8BBE;&#x7F6E;&#x4E3A;false&#x65F6;&#xFF0C;&#x670D;&#x52A1;&#x5668;&#x6536;&#x5230;&#x7684;&#x8BF7;&#x6C42;&#x5934;&#x4E2D;&#x7684;host&#x4E3A;&#xFF1A;localhost:3000</span><br><span class="line"></span><br><span class="line">      	*/</span><br><span class="line">        </span><br><span class="line">      pathRewrite: { &quot;^/api1&quot;: &quot;&quot; }, //&#x91CD;&#x5199;&#x8BF7;&#x6C42;&#x8DEF;&#x5F84;</span><br><span class="line">        /*</span><br><span class="line">        &#x670D;&#x52A1;&#x7AEF;</span><br><span class="line">        console.log(request.url)</span><br><span class="line">        &#x5982;&#x679C;&#x4E0D;&#x5199; &#x5C31;&#x4F1A;&#x8F93;&#x51FA;/api1/students &#x65E0;&#x6CD5;&#x67E5;&#x627E;&#x4F1A;&#x62A5;&#x9519;</span><br><span class="line">        */</span><br><span class="line">    }),</span><br><span class="line">    proxy(&quot;/api2&quot;, {</span><br><span class="line">        target: &quot;http://localhost:5001&quot;,</span><br><span class="line">        changeOrigin: true,</span><br><span class="line">        pathRewrite: { &quot;^/api2&quot;: &quot;&quot; }, //&#x5C06;api1&#x7684;&#x8DEF;&#x5F84;&#x6E05;&#x9664;</span><br><span class="line">      })</span><br><span class="line">  );</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line">App.jsx</span><br><span class="line">//&#x6CE8;&#x610F;url&#x7684;&#x4FEE;&#x6539;</span><br><span class="line"> axios.get(&quot;http://localhost:3000/api1/students&quot;).then</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>&#x8BF4;&#x660E;&#xFF1A;</p>
<ol>
<li>&#x4F18;&#x70B9;&#xFF1A;&#x53EF;&#x4EE5;&#x914D;&#x7F6E;&#x591A;&#x4E2A;&#x4EE3;&#x7406;&#xFF0C;&#x53EF;&#x4EE5;&#x7075;&#x6D3B;&#x7684;&#x63A7;&#x5236;&#x8BF7;&#x6C42;&#x662F;&#x5426;&#x8D70;&#x4EE3;&#x7406;&#x3002;</li>
<li>&#x7F3A;&#x70B9;&#xFF1A;&#x914D;&#x7F6E;&#x7E41;&#x7410;&#xFF0C;&#x524D;&#x7AEF;&#x8BF7;&#x6C42;&#x8D44;&#x6E90;&#x65F6;<strong>&#x5FC5;&#x987B;&#x52A0;&#x524D;&#x7F00;</strong>&#x3002;</li>
</ol>
<h3 id="2-github&#x641C;&#x7D22;&#x6848;&#x4F8B;"><a href="#2-github&#x641C;&#x7D22;&#x6848;&#x4F8B;" class="headerlink" title="2.github&#x641C;&#x7D22;&#x6848;&#x4F8B;"></a>2.github&#x641C;&#x7D22;&#x6848;&#x4F8B;</h3><p>&#x5F15;&#x5165;bootstrap&#x5E93;&#xFF0C;&#x53EF;&#x80FD;&#x4E0E;&#x4E4B;&#x524D;&#x5199;&#x8FC7;&#x7684;&#x6848;&#x4F8B;&#x6837;&#x5F0F;&#x4EA7;&#x751F;&#x51B2;&#x7A81;&#xFF0C;&#x6240;&#x4EE5;&#x5728;&#x4F7F;&#x7528;&#x524D;&#x6CE8;&#x610F;&#x6CE8;&#x91CA;&#x6389;&#x5F15;&#x5165;bootstrap&#x7684;&#x8BED;&#x53E5;</p>
<h4 id="&#x77E5;&#x8BC6;&#x70B9;"><a href="#&#x77E5;&#x8BC6;&#x70B9;" class="headerlink" title="&#x77E5;&#x8BC6;&#x70B9;:"></a>&#x77E5;&#x8BC6;&#x70B9;:</h4><h5 id="1-&#x8FDE;&#x7EED;&#x89E3;&#x6784;&#x8D4B;&#x503C;"><a href="#1-&#x8FDE;&#x7EED;&#x89E3;&#x6784;&#x8D4B;&#x503C;" class="headerlink" title="1.&#x8FDE;&#x7EED;&#x89E3;&#x6784;&#x8D4B;&#x503C;"></a>1.&#x8FDE;&#x7EED;&#x89E3;&#x6784;&#x8D4B;&#x503C;</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">   const{keywordElement:{value}}=this</span><br><span class="line">   console.log(value);</span><br><span class="line">/*console.log(keywordElement) &#x4F46;&#x8BE5;&#x53D8;&#x91CF;&#x5E76;&#x6CA1;&#x6709;&#x5B9A;&#x4E49;*/</span><br><span class="line"></span><br><span class="line">&#x89E3;&#x6784;&#x8D4B;&#x503C;&#x6539;&#x540D;</span><br><span class="line">  const{keywordElement:{value:data}}=this //&#x65B0;&#x5EFA;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;data&#x5B58;&#x653E;value&#x7684;&#x503C;</span><br></pre></td></tr></table></figure>
<h5 id="2-&#x591A;&#x6B21;&#x8BF7;&#x6C42;&#x7F51;&#x7AD9;&#x7684;&#x95EE;&#x9898;"><a href="#2-&#x591A;&#x6B21;&#x8BF7;&#x6C42;&#x7F51;&#x7AD9;&#x7684;&#x95EE;&#x9898;" class="headerlink" title="2.&#x591A;&#x6B21;&#x8BF7;&#x6C42;&#x7F51;&#x7AD9;&#x7684;&#x95EE;&#x9898;"></a>2.&#x591A;&#x6B21;&#x8BF7;&#x6C42;&#x7F51;&#x7AD9;&#x7684;&#x95EE;&#x9898;</h5><p>&#x591A;&#x6B21;&#x8BF7;&#x6C42;&#x7F51;&#x7AD9;&#xFF0C;&#x53EF;&#x80FD;&#x4F1A;&#x5BFC;&#x81F4;&#x88AB;&#x8BEF;&#x8BA4;&#x4E3A;&#x662F;&#x975E;&#x6CD5;&#x5165;&#x4FB5;&#xFF0C;&#x7F51;&#x7AD9;&#x62D2;&#x7EDD;&#x8BF7;&#x6C42;&#x3002;</p>
<p>&#x672C;&#x5730;&#x8BF7;&#x6C42;&#x5176;&#x4ED6;&#x7F51;&#x7AD9;&#x6CA1;&#x6709;&#x4EA7;&#x751F;&#x8DE8;&#x57DF;&#x95EE;&#x9898;&#xFF0C;&#x662F;&#x56E0;&#x4E3A;&#x540E;&#x7AEF;&#x8BBE;&#x7F6E;&#x4E86;&#x54CD;&#x5E94;&#x5934;&#xFF0C;&#x89E3;&#x51B3;&#x4E86;cors&#x95EE;&#x9898;&#x3002;</p>
<h5 id="3-&#x53D1;&#x8BF7;&#x6C42;&#x7684;&#x4F4D;&#x7F6E;"><a href="#3-&#x53D1;&#x8BF7;&#x6C42;&#x7684;&#x4F4D;&#x7F6E;" class="headerlink" title="3.&#x53D1;&#x8BF7;&#x6C42;&#x7684;&#x4F4D;&#x7F6E;"></a>3.&#x53D1;&#x8BF7;&#x6C42;&#x7684;&#x4F4D;&#x7F6E;</h5><p>&#x5982;&#x679C;&#x53D1;&#x8BF7;&#x6C42;&#x6240;&#x5904;&#x7684;&#x4F4D;&#x7F6E;&#x548C;&#x53D1;&#x8BF7;&#x6C42;&#x7684;&#x4F4D;&#x7F6E; &#x4E3B;IP&#x662F;&#x4E00;&#x81F4;&#xFF0C;&#x90A3;&#x4E48;&#x53EF;&#x4EE5;&#x7701;&#x7565;</p>
<blockquote>
<p>axios.get(<code>/api1/search/users?q=${data}</code>)  &#x76F4;&#x63A5;&#x7701;&#x7565;localhost:3000</p>
</blockquote>
<p>incomplete_result &#x8FD4;&#x56DE;&#x6570;&#x636E;&#x662F;&#x5426;&#x5B8C;&#x6574; &#xFF1A;</p>
<p>false&#x4E0D;&#x5B8C;&#x6574;</p>
<h5 id="4-&#x5173;&#x4E8E;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x8FD4;&#x56DE;&#x503C;&#x7684;&#x62EC;&#x53F7;&#x95EE;&#x9898;"><a href="#4-&#x5173;&#x4E8E;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x8FD4;&#x56DE;&#x503C;&#x7684;&#x62EC;&#x53F7;&#x95EE;&#x9898;" class="headerlink" title="4.&#x5173;&#x4E8E;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x8FD4;&#x56DE;&#x503C;&#x7684;&#x62EC;&#x53F7;&#x95EE;&#x9898;"></a>4.&#x5173;&#x4E8E;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x8FD4;&#x56DE;&#x503C;&#x7684;&#x62EC;&#x53F7;&#x95EE;&#x9898;</h5><p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207112208983.png" alt="image-20220711220819886"></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">saveUsers=(users)=&gt;</span><br><span class="line">{</span><br><span class="line">    this.setState({users}) </span><br><span class="line">    //&#x6CE8;&#x610F;&#x8FD9;&#x91CC;&#x7684;&#x5927;&#x62EC;&#x53F7;&#xFF0C;&#x56E0;&#x4E3A;&#x4F7F;&#x7528;&#x8BE5;&#x65B9;&#x6CD5;&#x65F6;&#xFF0C;&#x4F20;&#x5165;&#x5982;&#x4E0B;</span><br><span class="line">    /*</span><br><span class="line">    saveUsers(response.data.item}) &#x4F20;&#x5165;&#x7684;&#x662F;&#x6570;&#x7EC4;&#xFF0C;&#x8981;&#x4F7F;&#x7528;&#x5927;&#x62EC;&#x53F7;&#x8FDB;&#x884C;&#x89E3;&#x6784;&#xFF0C;&#x7136;&#x540E;&#x4F20;&#x5165;users&#x72B6;&#x6001;&#x5C5E;&#x6027;</span><br><span class="line">    */</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">  updateAppState = (stateObj) =&gt; {</span><br><span class="line">    this.setState(stateObj ); </span><br><span class="line">      //&#x8FD9;&#x91CC;&#x4E0D;&#x9002;&#x7528;&#x5927;&#x62EC;&#x53F7;&#xFF0C;&#x56E0;&#x4E3A;&#x4F20;&#x5165;&#x7684;&#x662F;&#x5BF9;&#x8C61;</span><br><span class="line">      // this.props.updateAppState({ isLoading: false, err: error.message });</span><br><span class="line">  };</span><br></pre></td></tr></table></figure>
<h5 id="5-&#x641C;&#x7D22;&#x6570;&#x636E;&#x7684;&#x9650;&#x5236;"><a href="#5-&#x641C;&#x7D22;&#x6570;&#x636E;&#x7684;&#x9650;&#x5236;" class="headerlink" title="5.&#x641C;&#x7D22;&#x6570;&#x636E;&#x7684;&#x9650;&#x5236;"></a>5.&#x641C;&#x7D22;&#x6570;&#x636E;&#x7684;&#x9650;&#x5236;</h5><p>&#x5173;&#x4E8E;github&#x7C7B;&#x4F3C;&#x7684;&#x7F51;&#x7AD9;&#x641C;&#x7D22;&#xFF0C;&#x5982;&#x679C;&#x641C;&#x7D22;&#x4E2D;&#x6587;&#x5219;&#x6CA1;&#x6709;&#x6570;&#x636E;&#xFF0C;&#x56E0;&#x4E3A;&#x8BE5;&#x7F51;&#x7AD9;&#x4E0D;&#x5141;&#x8BB8;&#x4E2D;&#x6587;&#x6CE8;&#x518C;&#x3002;</p>
<p>&#x7B49;&#x4E00;&#x7CFB;&#x5217;&#x7F51;&#x7AD9;&#x76F8;&#x5173;&#x95EE;&#x9898;&#xFF0C;&#x9700;&#x8981;&#x81EA;&#x5DF1;&#x67E5;&#x770B;</p>
<h5 id="6-&#x6D88;&#x606F;&#x8BA2;&#x9605;-&#x53D1;&#x5E03;&#x673A;&#x5236;"><a href="#6-&#x6D88;&#x606F;&#x8BA2;&#x9605;-&#x53D1;&#x5E03;&#x673A;&#x5236;" class="headerlink" title="6.&#x6D88;&#x606F;&#x8BA2;&#x9605;-&#x53D1;&#x5E03;&#x673A;&#x5236;"></a>6.&#x6D88;&#x606F;&#x8BA2;&#x9605;-&#x53D1;&#x5E03;&#x673A;&#x5236;</h5><p>&#x5144;&#x5F1F;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x7684;&#x4FE1;&#x606F;&#x4F20;&#x9012;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">1)	import PubSub from &apos;pubsub-js&apos; //&#x5F15;&#x5165;</span><br><span class="line">2)	PubSub.subscribe(&apos;delete&apos;, function(_,data){ }); //&#x8BA2;&#x9605;</span><br><span class="line">3)	PubSub.publish(&apos;delete&apos;, data) //&#x53D1;&#x5E03;&#x6D88;&#x606F;</span><br><span class="line"></span><br><span class="line">List.jsx</span><br><span class="line">//&#x5C06;&#x6240;&#x9700;&#x5C5E;&#x6027;&#x653E;&#x5728;&#x8BE5;&#x7EC4;&#x4EF6;&#x91CC;</span><br><span class="line">    state = {</span><br><span class="line">      users: [],</span><br><span class="line">      isFirst: true, //&#x662F;&#x5426;&#x4E3A;&#x7B2C;&#x4E00;&#x6B21;&#x6253;&#x5F00;</span><br><span class="line">      isLoading: false, //&#x6807;&#x8BC6;&#x662F;&#x5426;&#x5904;&#x4E8E;&#x52A0;&#x8F7D;&#x4E2D;</span><br><span class="line">      err: &quot;&quot;, //&#x5B58;&#x50A8;&#x8BF7;&#x6C42;&#x76F8;&#x5173;&#x7684;&#x9519;&#x8BEF;&#x4FE1;&#x606F;</span><br><span class="line">    };</span><br><span class="line">    componentDidMount()</span><br><span class="line">    {</span><br><span class="line">      this.token=PubSub.subscribe(&apos;zqy&apos;,(_,stateObj) =&gt; {</span><br><span class="line">        this.setState(stateObj) //&#x63A5;&#x6536;&#x6570;&#x636E;&#x540E;&#xFF0C;&#x8FDB;&#x884C;&#x72B6;&#x6001;&#x7684;&#x4FEE;&#x6539;</span><br><span class="line">      })</span><br><span class="line">    }</span><br><span class="line">    componentWillUnmount()</span><br><span class="line">    {</span><br><span class="line">      PubSub.unsubscribe(this.token)</span><br><span class="line">    }</span><br><span class="line">Search.jsx</span><br><span class="line"> PubSub.publish(&apos;zqy&apos;,{ isFirst: false, isLoading: true }); </span><br><span class="line">//&#x4F7F;&#x7528;&#x53D1;&#x5E03;&#x8FDB;&#x884C;&#x72B6;&#x6001;&#x7684;&#x4FEE;&#x6539;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h5 id="7-&#x62D3;&#x5C55;-fetch&#x53D1;&#x5E03;&#x8BF7;&#x6C42;"><a href="#7-&#x62D3;&#x5C55;-fetch&#x53D1;&#x5E03;&#x8BF7;&#x6C42;" class="headerlink" title="7.&#x62D3;&#x5C55; fetch&#x53D1;&#x5E03;&#x8BF7;&#x6C42;"></a>7.&#x62D3;&#x5C55; fetch&#x53D1;&#x5E03;&#x8BF7;&#x6C42;</h5><p>Jquery&#x548C;axios&#x662F;&#x5BF9;xhr&#x7684;&#x5C01;&#x88C5;&#x3002;fetch&#x548C;xhr&#x662F;&#x4E00;&#x4E2A;&#x5730;&#x4F4D;&#x7684;&#x3002;</p>
<p><strong>&#x9ED8;&#x8BA4;get&#x8BF7;&#x6C42;(&#x5173;&#x6CE8;&#x5206;&#x79BB;&#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;)</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#x91C7;&#x7528;async&#x548C;await</span><br><span class="line"> search = async() =&gt; {</span><br><span class="line">    // &#x83B7;&#x53D6;&#x7528;&#x6237;&#x8F93;&#x5165;</span><br><span class="line">    const {</span><br><span class="line">      keywordElement: { value: keyWord },</span><br><span class="line">    } = this;</span><br><span class="line">    // &#x53D1;&#x9001;&#x524D;&#x66F4;&#x65B0;&#x72B6;&#x6001;</span><br><span class="line">    PubSub.publish(&quot;zqy&quot;, { isFirst: false, isLoading: true });</span><br><span class="line">    // axios.get(`/api1/search/users?q=${keyWord}`).then(</span><br><span class="line">    //   // &#x8BF7;&#x6C42;&#x6210;&#x529F;&#x901A;&#x77E5;List&#x66F4;&#x65B0;&#x72B6;&#x6001;</span><br><span class="line">    //   (response) =&gt; {</span><br><span class="line">    //     PubSub.publish(&apos;zqy&apos;,{</span><br><span class="line">    //       users: response.data.items,</span><br><span class="line">    //       isLoading: false,</span><br><span class="line">    //     });</span><br><span class="line">    //   },</span><br><span class="line">    //   //   &#x5931;&#x8D25;&#x540E;&#x66F4;&#x65B0;&#x72B6;&#x6001;</span><br><span class="line">    //   (error) =&gt; {</span><br><span class="line">    //     PubSub.publish(&apos;zqy&apos;, {isLoading: false, err: error.message });</span><br><span class="line">    //   }</span><br><span class="line">    // );</span><br><span class="line">     try{</span><br><span class="line">     const response=await fetch(`/api1/search/users2?q=${keyWord}`);</span><br><span class="line">     const result=await response.json();//&#x4F7F;&#x7528;await&#x5C31;&#x662F;&#x53EA;&#x6709;&#x8BE5;&#x8BF7;&#x6C42;&#x6210;&#x529F;&#x540E;&#x624D;&#x4F1A;&#x8FD4;&#x56DE;</span><br><span class="line">     PubSub.publish(&apos;zqy&apos;,{users:rersult.items,isLoading:false})</span><br><span class="line">     }catch(error){</span><br><span class="line">      console.log(error)</span><br><span class="line">     }</span><br><span class="line">     </span><br><span class="line">    /*</span><br><span class="line">    fetch(`/api1/search/users2?q=${keyWord}`).then(</span><br><span class="line">      (response) =&gt; {</span><br><span class="line">      //&#x6CE8;&#x610F;&#x8FD9;&#x91CC;&#x662F;&#x670D;&#x52A1;&#x5668;&#x662F;&#x5426;&#x8FDE;&#x63A5;&#x6210;&#x529F;&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x8BF7;&#x6C42;&#x662F;&#x5426;&#x6210;&#x529F;&#xFF0C;&#x6CA1;&#x7F51;&#x80FD;&#x8BF7;&#x6C42;&#x4F46;&#x662F;&#x65E0;&#x6CD5;&#x8FDE;&#x63A5;</span><br><span class="line">        console.log(&quot;&#x670D;&#x52A1;&#x5668;&#x8FDE;&#x63A5;&#x6210;&#x529F;&#x4E86;&quot;, response);</span><br><span class="line">      },</span><br><span class="line">      (error) =&gt; {</span><br><span class="line">        console.log(&quot;&#x670D;&#x52A1;&#x5668;&#x8FDE;&#x63A5;&#x5931;&#x8D25;&#x4E86;&quot;, error);</span><br><span class="line">      }</span><br><span class="line">    ).then(</span><br><span class="line">    	response=&gt;{</span><br><span class="line">    	//&#x6CE8;&#x610F;&#x5373;&#x4F7F;&#x670D;&#x52A1;&#x5668;&#x8FDE;&#x63A5;&#x5931;&#x8D25;(&#x6CA1;&#x7F51;&#x60C5;&#x51B5;&#x4E0B;),&#x4E5F;&#x4F1A;&#x8FD4;&#x56DE;&#x6570;&#x636E;&#x83B7;&#x53D6;&#x6210;&#x529F;&#xFF0C;&#x6B64;&#x65F6;&#x662F;undefined</span><br><span class="line">    	console.log(&apos;&#x6570;&#x636E;&#x83B7;&#x53D6;&#x6210;&#x529F;&apos;)</span><br><span class="line">    	}</span><br><span class="line">    )</span><br><span class="line">    */</span><br><span class="line">  };</span><br></pre></td></tr></table></figure>
<h2 id="5-React&#x8DEF;&#x7531;"><a href="#5-React&#x8DEF;&#x7531;" class="headerlink" title="5.React&#x8DEF;&#x7531;"></a>5.React&#x8DEF;&#x7531;</h2><h3 id="1-&#x76F8;&#x5173;&#x7406;&#x89E3;"><a href="#1-&#x76F8;&#x5173;&#x7406;&#x89E3;" class="headerlink" title="1.&#x76F8;&#x5173;&#x7406;&#x89E3;"></a>1.&#x76F8;&#x5173;&#x7406;&#x89E3;</h3><h4 id="1-1-SPA&#x7406;&#x89E3;"><a href="#1-1-SPA&#x7406;&#x89E3;" class="headerlink" title="1.1 SPA&#x7406;&#x89E3;"></a>1.1 SPA&#x7406;&#x89E3;</h4><p>\1.   &#x5355;&#x9875;Web&#x5E94;&#x7528;&#xFF08;single page web application&#xFF0C;SPA&#xFF09;&#x3002;</p>
<p>\2.   &#x6574;&#x4E2A;&#x5E94;&#x7528;&#x53EA;&#x6709;<strong>&#x4E00;&#x4E2A;&#x5B8C;&#x6574;&#x7684;&#x9875;&#x9762;</strong>&#x3002;</p>
<p>\3.   &#x70B9;&#x51FB;&#x9875;&#x9762;&#x4E2D;&#x7684;&#x94FE;&#x63A5;<strong>&#x4E0D;&#x4F1A;&#x5237;&#x65B0;</strong>&#x9875;&#x9762;&#xFF0C;&#x53EA;&#x4F1A;&#x505A;&#x9875;&#x9762;&#x7684;<strong>&#x5C40;&#x90E8;&#x66F4;&#x65B0;&#x3002;</strong></p>
<p>\4.   &#x6570;&#x636E;&#x90FD;&#x9700;&#x8981;&#x901A;&#x8FC7;ajax&#x8BF7;&#x6C42;&#x83B7;&#x53D6;, &#x5E76;&#x5728;&#x524D;&#x7AEF;&#x5F02;&#x6B65;&#x5C55;&#x73B0;&#x3002;</p>
<h4 id="1-2-&#x524D;&#x7AEF;&#x8DEF;&#x7531;&#x539F;&#x7406;"><a href="#1-2-&#x524D;&#x7AEF;&#x8DEF;&#x7531;&#x539F;&#x7406;" class="headerlink" title="1.2 &#x524D;&#x7AEF;&#x8DEF;&#x7531;&#x539F;&#x7406;"></a>1.2 &#x524D;&#x7AEF;&#x8DEF;&#x7531;&#x539F;&#x7406;</h4><p>&#x524D;&#x7AEF;&#x8DEF;&#x7531;&#x5C31;&#x662F;&#x4F9D;&#x9760;&#x4E8E;&#x5386;&#x53F2;&#x8BB0;&#x5F55;&#x5B9E;&#x73B0;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">	// let history = History.createBrowserHistory() //&#x65B9;&#x6CD5;&#x4E00;&#xFF0C;&#x76F4;&#x63A5;&#x4F7F;&#x7528;H5&#x63A8;&#x51FA;&#x7684;history&#x8EAB;&#x4E0A;&#x7684;API</span><br><span class="line">	let history = History.createHashHistory() //&#x65B9;&#x6CD5;&#x4E8C;&#xFF0C;hash&#x503C;&#xFF08;&#x951A;&#x70B9;&#xFF09;</span><br><span class="line">   //&#x951A;&#x70B9;&#x8DF3;&#x8F6C;</span><br><span class="line">   /*</span><br><span class="line">   &lt;a href=&quot;#div1&quot;&gt;go to div1&lt;/a&gt;</span><br><span class="line">&lt;a href=&quot;#div2&quot;&gt;go to div2&lt;/a&gt;</span><br><span class="line">...</span><br><span class="line">&lt;div id=&quot;div1&quot;&gt;div1&lt;/div&gt;</span><br><span class="line">&lt;div id=&quot;div2&quot;&gt;div2&lt;/div&gt;</span><br><span class="line">   &#x4F18;&#x70B9;&#xFF1A;&#x5B9E;&#x73B0;&#x65B9;&#x5F0F;&#x7B80;&#x5355;&#xFF1B;</span><br><span class="line">&#x7F3A;&#x70B9;&#xFF1A;&#x70B9;&#x51FB;&#x951A;&#x70B9;&#x4E4B;&#x540E;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x7684;URL&#x4F1A;&#x53D1;&#x751F;&#x53D8;&#x5316;&#xFF0C;&#x8FD9;&#x6837;&#xFF0C;&#x9047;&#x5230;&#x9875;&#x9762;&#x5237;&#x65B0;&#x5F88;&#x53EF;&#x80FD;&#x4F1A;&#x51FA;&#x73B0;&#x95EE;&#x9898;&#x3002;</span><br><span class="line">   history.html#/test1</span><br><span class="line">   */</span><br><span class="line"></span><br><span class="line">	function push (path) {</span><br><span class="line">		history.push(path)</span><br><span class="line">		return false</span><br><span class="line">	}</span><br><span class="line"></span><br><span class="line">	function replace (path) {</span><br><span class="line">		history.replace(path)</span><br><span class="line">	}</span><br><span class="line"></span><br><span class="line">	function back() {</span><br><span class="line">		history.goBack()</span><br><span class="line">	}</span><br><span class="line"></span><br><span class="line">	function forword() {</span><br><span class="line">		history.goForward()</span><br><span class="line">	}</span><br><span class="line"></span><br><span class="line">	history.listen((location) =&gt; {</span><br><span class="line">		console.log(&apos;&#x8BF7;&#x6C42;&#x8DEF;&#x7531;&#x8DEF;&#x5F84;&#x53D8;&#x5316;&#x4E86;&apos;, location)</span><br><span class="line">	})</span><br></pre></td></tr></table></figure>
<h4 id="1-3-react-router-dom&#x7684;&#x7406;&#x89E3;"><a href="#1-3-react-router-dom&#x7684;&#x7406;&#x89E3;" class="headerlink" title="1.3 react-router-dom&#x7684;&#x7406;&#x89E3;"></a>1.3 react-router-dom&#x7684;&#x7406;&#x89E3;</h4><p>react-Router&#x6709;&#x4E09;&#x4E2A;&#x7248;&#x672C; &#x9009;&#x53D6;web&#x7248;&#x672C;&#x8FDB;&#x884C;&#x5B66;&#x4E60;&#x524D;&#x7AEF;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">import { Link, Route } from &quot;react-router-dom&quot;;</span><br><span class="line"></span><br><span class="line">----------------</span><br><span class="line">&#x5BFC;&#x822A;&#x533A;&#x7684;a&#x6807;&#x7B7E;&#x66F4;&#x6539;&#x4E3A;Link&#x6807;&#x7B7E;  &#x6D4F;&#x89C8;&#x5668;&#x81EA;&#x52A8;&#x5C06;Link&#x8F6C;&#x6362;&#x4E3A;a&#x6807;&#x7B7E;</span><br><span class="line">{/* &#x901A;&#x8FC7;&#x8DEF;&#x7531;&#x94FE;&#x63A5;&#x5B9E;&#x73B0;&#x5207;&#x6362;&#x7EC4;&#x4EF6; */}</span><br><span class="line">&lt;Link className=&quot;list-group-item &quot; to=&quot;/about&quot;&gt;</span><br><span class="line">    About</span><br><span class="line">&lt;/Link&gt;</span><br><span class="line">&lt;Link className=&quot;list-group-item &quot; to=&quot;/home&quot;&gt;</span><br><span class="line">    Home</span><br><span class="line">&lt;/Link&gt;</span><br><span class="line">----------------</span><br><span class="line">&#x5C55;&#x793A;&#x533A; &#x5199;Route&#x8FDB;&#x884C;&#x8DEF;&#x5F84;&#x7684;&#x5339;&#x914D;</span><br><span class="line"> &lt;div className=&quot;panel-body&quot;&gt;</span><br><span class="line">        {/* &#x6CE8;&#x518C;&#x8DEF;&#x7531; */}</span><br><span class="line">&lt;Route path={&quot;/about&quot;} component={About} /&gt;</span><br><span class="line">&lt;Route path={&quot;/home&quot;} component={Home} /&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&#x8DEF;&#x7531;&#x5668;&#x76F8;&#x5173;&#x7EC4;&#x4EF6;&#x9700;&#x8981;&#x5199;&#x5728;&#x8DEF;&#x7531;&#x5668;&#x5185;&#x90E8;</span><br><span class="line">------------------</span><br><span class="line">&#x540C;&#x4E00;&#x4E2A;&#x9879;&#x76EE;&#x7684;&#x677F;&#x5757;&#x9700;&#x8981;&#x4E00;&#x4E2A;&#x8DEF;&#x7531;&#x5668;&#x8FDB;&#x884C;&#x6570;&#x636E;&#x7684;&#x4F20;&#x9001;</span><br><span class="line">&#x6240;&#x4EE5;&#x5C06;&#x8DEF;&#x7531;&#x5668;&#x5199;&#x5728;App&#x5916;&#x9762;</span><br><span class="line">&lt;App&gt;&#x5916;&#x5305;&#x4E00;&#x4E2A;HashRouter&#x6216;&#x8005;BrowserRouter</span><br><span class="line">index.jsx</span><br><span class="line">&lt;BrowserRouter&gt;</span><br><span class="line">    &lt;App /&gt;</span><br><span class="line">&lt;/BrowserRouter&gt;</span><br></pre></td></tr></table></figure>
<h5 id="&#x77E5;&#x8BC6;&#x70B9;&#xFF1A;"><a href="#&#x77E5;&#x8BC6;&#x70B9;&#xFF1A;" class="headerlink" title="&#x77E5;&#x8BC6;&#x70B9;&#xFF1A;"></a>&#x77E5;&#x8BC6;&#x70B9;&#xFF1A;</h5><h6 id="1-&#x4E00;&#x822C;&#x7EC4;&#x4EF6;&#x548C;&#x8DEF;&#x7531;&#x7EC4;&#x4EF6;-location-history-match"><a href="#1-&#x4E00;&#x822C;&#x7EC4;&#x4EF6;&#x548C;&#x8DEF;&#x7531;&#x7EC4;&#x4EF6;-location-history-match" class="headerlink" title="1.&#x4E00;&#x822C;&#x7EC4;&#x4EF6;&#x548C;&#x8DEF;&#x7531;&#x7EC4;&#x4EF6;(location,history,match)"></a>1.&#x4E00;&#x822C;&#x7EC4;&#x4EF6;&#x548C;&#x8DEF;&#x7531;&#x7EC4;&#x4EF6;(location,history,match)</h6><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">1.&#x6700;&#x5927;&#x533A;&#x522B;&#x662F; &#x8DEF;&#x7531;&#x7EC4;&#x4EF6;&#x4F1A;&#x6536;&#x5230;&#x8DEF;&#x7531;&#x5668;&#x4F20;&#x9012;&#x8FC7;&#x6765; &#x4E09;&#x5927;&#x5C5E;&#x6027; location history match</span><br><span class="line"></span><br><span class="line">	history:</span><br><span class="line">        go: &#x192; go(n)</span><br><span class="line">        goBack: &#x192; goBack()</span><br><span class="line">        goForward: &#x192; goForward()</span><br><span class="line">        push: &#x192; push(path, state)</span><br><span class="line">        replace: &#x192; replace(path, state)</span><br><span class="line">	location:</span><br><span class="line">        pathname: &quot;/about&quot;</span><br><span class="line">        search: &quot;&quot;</span><br><span class="line">        state: undefined</span><br><span class="line">    match:</span><br><span class="line">        params: {}</span><br><span class="line">        path: &quot;/about&quot;</span><br><span class="line">        url: &quot;/about&quot;</span><br><span class="line">2.&#x5199;&#x6CD5;&#x4E0D;&#x540C;</span><br><span class="line">	&lt;Header/&gt; &#x4E00;&#x822C;&#x7EC4;&#x4EF6;</span><br><span class="line">    &lt;Route path={&quot;/home&quot;} component={Home} /&gt; &#x8DEF;&#x7531;&#x7EC4;&#x4EF6;&#xFF0C;&#x7531;&#x5339;&#x914D;&#x5230;&#x7684;&#x8DEF;&#x5F84;&#x6765;&#x9009;&#x62E9;&#x6E32;&#x67D3;</span><br><span class="line">3.&#x5B58;&#x653E;&#x4F4D;&#x7F6E;&#x4E0D;&#x540C;</span><br><span class="line">    -&#x4E00;&#x822C;&#x7EC4;&#x4EF6; &#x5B58;&#x653E;&#x5728;components</span><br><span class="line">    &#x8DEF;&#x7531;&#x7EC4;&#x4EF6; &#x5B58;&#x653E;&#x5728;pages&#x91CC;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h6 id="2-NavLink&#x7684;&#x4F7F;&#x7528;"><a href="#2-NavLink&#x7684;&#x4F7F;&#x7528;" class="headerlink" title="2.NavLink&#x7684;&#x4F7F;&#x7528;"></a>2.NavLink&#x7684;&#x4F7F;&#x7528;</h6><p>NavLink&#x548C;Link&#x7684;&#x533A;&#x522B; &#x662F;NavLink&#x7684;&#x53C2;&#x6570;&#x8F83;&#x591A;</p>
<p>&#x9ED8;&#x8BA4;&#x81EA;&#x5E26;avtive&#x6837;&#x5F0F;&#xFF0C;&#x70B9;&#x51FB;&#x5BFC;&#x822A;&#x80CC;&#x666F;&#x989C;&#x8272;&#x4E3A;&#x84DD;&#x8272;</p>
<p>&#x5E76;&#x4E14;&#x53EF;&#x4EE5;&#x81EA;&#x5B9A;&#x4E49;&#x6837;&#x5F0F;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;NavLink activeClassName=&quot;zqy&quot; className=&quot;list-group-item &quot; to=&quot;/about&quot;&gt;</span><br><span class="line">    About</span><br><span class="line">&lt;/NavLink&gt;</span><br><span class="line">    --------</span><br><span class="line">&#x56E0;&#x4E3A;&#x6700;&#x540E;&#x6837;&#x5F0F;&#x90FD;&#x4F1A;&#x5B58;&#x653E;&#x5728;index.html&#x91CC;&#xFF0C;&#x6240;&#x4EE5;&#x76F4;&#x63A5;&#x5728;&#x91CC;&#x9762;&#x5199;&#x6837;&#x5F0F;&#xFF0C;&#x65B9;&#x4FBF;</span><br><span class="line">index.html&#x91CC;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">    .zqy{</span><br><span class="line">        background-color: rgba(255, 166, 0, 0.705) !important;</span><br><span class="line">        //&#x56E0;&#x4E3A;NavLink&#x7684;&#x6837;&#x5F0F;&#x6743;&#x9650;&#x8F83;&#x9AD8;&#xFF0C;&#x81EA;&#x5B9A;&#x4E49;&#x6837;&#x5F0F;&#x91CC;&#x9700;&#x8981;&#x5199;&#xFF01;important</span><br><span class="line">        color: red !important;</span><br><span class="line">    }</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h6 id="3-NavLink&#x7684;&#x5C01;&#x88C5;"><a href="#3-NavLink&#x7684;&#x5C01;&#x88C5;" class="headerlink" title="3.NavLink&#x7684;&#x5C01;&#x88C5;"></a>3.NavLink&#x7684;&#x5C01;&#x88C5;</h6><p>&#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;&#xFF0C;&#x5C06;&#x516C;&#x5171;&#x7684;&#x90E8;&#x5206;&#x5199;&#x5728;&#x91CC;&#x9762;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">MyNavLink.jsx</span><br><span class="line">export default class MyNavLink extends Component {</span><br><span class="line">    render() {</span><br><span class="line">        return (</span><br><span class="line">            &lt;NavLink activeClassName=&quot;zqy&quot; className=&quot;list-group-item &quot; {...this.props}/&gt; //&#x8FD9;&#x91CC;&#x76F4;&#x63A5;&#x91C7;&#x53D6;&#x95ED;&#x5408;&#x6807;&#x7B7E;&#xFF0C;&#x901A;&#x8FC7;&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;&#x4F20;&#x5165;&#x5168;&#x90E8;&#x5C5E;&#x6027;&#xFF0C;&#x5305;&#x62EC;&#x6807;&#x7B7E;&#x4F53;</span><br><span class="line">        );</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">    ---------</span><br><span class="line"> App.jsx</span><br><span class="line">&lt;MyNavLink to=&apos;/home&apos; &gt;Home&lt;/MyNavLink&gt;</span><br><span class="line">//&#x5C01;&#x88C5;&#x6700;&#x597D;&#x91C7;&#x53D6;&#x539F;&#x5C01;&#x88C5;&#x5185;&#x5BB9;&#x7684;&#x683C;&#x5F0F;</span><br><span class="line"></span><br><span class="line">&#x77E5;&#x8BC6;&#x70B9;&#xFF1A;</span><br><span class="line">&#x6807;&#x7B7E;&#x4F53;&#x4E5F;&#x662F;&#x7279;&#x6B8A;&#x7684;&#x6807;&#x7B7E;&#x5C5E;&#x6027;</span><br><span class="line">&#x662F;this.props.children</span><br></pre></td></tr></table></figure>
<h4 id="1-4-Switch&#x7684;&#x4F7F;&#x7528;"><a href="#1-4-Switch&#x7684;&#x4F7F;&#x7528;" class="headerlink" title="1.4 Switch&#x7684;&#x4F7F;&#x7528;"></a>1.4 Switch&#x7684;&#x4F7F;&#x7528;</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">import Switch from &apos;react-router-dom&apos;</span><br><span class="line">&lt;Switch&gt;</span><br><span class="line">    {&quot; &quot;}</span><br><span class="line">    &lt;Route path={&quot;/about&quot;} component={About} /&gt;</span><br><span class="line">    &lt;Route path={&quot;/home&quot;} component={Home} /&gt;</span><br><span class="line">    &lt;Route path={&quot;/home&quot;} component={Test} /&gt;</span><br><span class="line">&lt;/Switch&gt;</span><br><span class="line">1.&#x901A;&#x5E38;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;path&#x548C;component&#x662F;&#x4E00;&#x4E00;&#x5BF9;&#x5E94;&#x5173;&#x7CFB;</span><br><span class="line">2.Switch&#x53EF;&#x4EE5;&#x63D0;&#x9AD8;&#x8DEF;&#x7531;&#x5339;&#x914D;&#x4FA0;&#x4FA3;(&#x5355;&#x4E00;&#x5339;&#x914D;) &#x4EE5;&#x6700;&#x5148;&#x51FA;&#x73B0;&#x7684;&#x4E3A;&#x4E3B;</span><br></pre></td></tr></table></figure>
<h4 id="1-5-&#x89E3;&#x51B3;&#x6837;&#x5F0F;&#x4E22;&#x5931;"><a href="#1-5-&#x89E3;&#x51B3;&#x6837;&#x5F0F;&#x4E22;&#x5931;" class="headerlink" title="1.5 &#x89E3;&#x51B3;&#x6837;&#x5F0F;&#x4E22;&#x5931;"></a>1.5 &#x89E3;&#x51B3;&#x6837;&#x5F0F;&#x4E22;&#x5931;</h4><p>&#x4F7F;&#x7528;BrowserRouter&#x4F5C;&#x4E3A;&#x8DEF;&#x7531;&#x5668;&#x3002;HashRouter&#x6CA1;&#x6709;&#x62A5;&#x9519;</p>
<p>&#x51FA;&#x73B0;&#x539F;&#x56E0;&#xFF1A;</p>
<p>&#x5F53;&#x8DEF;&#x7531;&#x8DEF;&#x5F84;&#x51FA;&#x73B0;&#x591A;&#x7EA7;&#x65F6;&#xFF0C;&#x5237;&#x65B0;&#x540E;&#x4FBF;&#x5BFC;&#x81F4;&#x6837;&#x5F0F;&#x4E22;&#x5931;&#x3002;&#x56E0;&#x4E3A;&#x6D4F;&#x89C8;&#x5668;&#x4F1A;&#x8BEF;&#x8BA4;&#x4E3A;&#x591A;&#x7EA7;&#x8DEF;&#x5F84;&#x662F;&#x9ED8;&#x8BA4;&#x8DEF;&#x5F84;&#xFF0C;&#x5BFC;&#x81F4;&#x6D4F;&#x89C8;&#x5668;&#x65E0;&#x6CD5;&#x67E5;&#x627E;&#x5230;&#x6837;&#x5F0F;&#x6240;&#x5728;&#x3002;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;Route path={&quot;/zqy/about&quot;} component={About} /&gt;</span><br><span class="line">&lt;Route path={&quot;/zqy/home&quot;} component={Home} /&gt;</span><br><span class="line">&#x6837;&#x5F0F;&#x641C;&#x7D22;&#x7F51;&#x7AD9;&#x53D1;&#x751F;&#x5F02;&#x5E38;</span><br></pre></td></tr></table></figure>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207131608256.png" alt="image-20220713160812171"></p>
<p><strong>&#x5F53;&#x6D4F;&#x89C8;&#x5668;&#x6CA1;&#x6709;&#x67E5;&#x627E;&#x5230;&#x76F8;&#x5173;&#x7684;&#x6570;&#x636E;&#x65F6;&#xFF0C;&#x4F1A;&#x663E;&#x793A;index.html&#x4F5C;&#x4E3A;&#x9875;&#x9762;&#x3002;</strong></p>
<p>&#x89E3;&#x51B3;&#x65B9;&#x6848;</p>
<ol>
<li>&#x5C06;BrowserRouter&#x6539;&#x4E3A;HashRouter</li>
<li>&#x5C06;index.html&#x5F15;&#x5165;&#x7684;&#x6837;&#x5F0F;&#x540D;</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;./css/bootstrap.css&quot;&gt;</span><br><span class="line">    &#x4FEE;&#x6539;&#x4E3A;</span><br><span class="line"> &lt;link rel=&quot;stylesheet&quot; href=&quot;/css/bootstrap.css&quot;&gt; //&#x53BB;&#x6389;css&#x524D;&#x7684;.  </span><br><span class="line">  &#x4E0D;&#x7136;./&#x4F1A;&#x8BFB;&#x53D6;&#x76F8;&#x5BF9;&#x8DEF;&#x5F84;</span><br></pre></td></tr></table></figure>
<p>3.%PUBLIC_URL% &#x53EA;&#x9002;&#x7528;&#x4E8E;React</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;./css/bootstrap.css&quot;&gt;</span><br><span class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;%PUBLIC_URL%/css/bootstrap.css&quot;&gt;</span><br><span class="line"> //%PUBLIC_URL% publi&#x6587;&#x4EF6;&#x7684;&#x7EDD;&#x5BF9;&#x8DEF;&#x5F84;</span><br></pre></td></tr></table></figure>
<h4 id="1-6-&#x8DEF;&#x7531;&#x7684;&#x7CBE;&#x51C6;&#x5339;&#x914D;&#x548C;&#x6A21;&#x7CCA;&#x5339;&#x914D;"><a href="#1-6-&#x8DEF;&#x7531;&#x7684;&#x7CBE;&#x51C6;&#x5339;&#x914D;&#x548C;&#x6A21;&#x7CCA;&#x5339;&#x914D;" class="headerlink" title="1.6 &#x8DEF;&#x7531;&#x7684;&#x7CBE;&#x51C6;&#x5339;&#x914D;&#x548C;&#x6A21;&#x7CCA;&#x5339;&#x914D;"></a>1.6 &#x8DEF;&#x7531;&#x7684;&#x7CBE;&#x51C6;&#x5339;&#x914D;&#x548C;&#x6A21;&#x7CCA;&#x5339;&#x914D;</h4><p>&#x6A21;&#x7CCA;&#x5339;&#x914D;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;Route path={&quot;/zqy&quot;} component={About} /&gt;</span><br><span class="line">------</span><br><span class="line">&lt;MyNavLink to=&quot;/zqy/about&quot;&gt;About&lt;/MyNavLink&gt; //&#x8DF3;&#x8F6C;&#x7684;&#x7F51;&#x7AD9;&#x5305;&#x542B;&#x8DEF;&#x7531;&#x7F51;&#x7AD9; &#x5219;&#x4F1A;&#x663E;&#x793A;&#xFF0C;&#x4F46;zqy&#x8981;&#x5728;&#x5F00;&#x5934;</span><br></pre></td></tr></table></figure>
<p>&#x7CBE;&#x51C6;&#x5339;&#x914D;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;Route exact /*&#x9ED8;&#x8BA4;&#x662F;true*/ path={&quot;/zqy&quot;} component={About} /&gt;</span><br></pre></td></tr></table></figure>
<p>V6&#x7248;&#x672C;&#x9ED8;&#x8BA4;&#x5F00;&#x542F;&#x4E25;&#x683C;&#x5339;&#x914D;&#xFF0C;&#x8981;&#x7528;&#x6A21;&#x7CCA;&#x5339;&#x914D;&#x53EF;&#x4EE5;&#x5199;&#x6210;/zqy/*</p>
<p>&#x5339;&#x914D;&#x7C7B;&#x578B;&#x636E;&#x60C5;&#x51B5;&#x800C;&#x5B9A;&#xFF0C;&#x6709;&#x65F6;&#x5019;&#x4E25;&#x683C;&#x5339;&#x914D;&#x4F1A;&#x5BFC;&#x81F4;&#x65E0;&#x6CD5;&#x7EE7;&#x7EED;&#x7EE7;&#x627F;&#x4E8C;&#x7EA7;&#x8DEF;&#x7531;</p>
<h4 id="1-7-Redirect&#x4F7F;&#x7528;-&#x91CD;&#x5B9A;&#x5411;"><a href="#1-7-Redirect&#x4F7F;&#x7528;-&#x91CD;&#x5B9A;&#x5411;" class="headerlink" title="1.7 Redirect&#x4F7F;&#x7528;(&#x91CD;&#x5B9A;&#x5411;)"></a>1.7 Redirect&#x4F7F;&#x7528;(&#x91CD;&#x5B9A;&#x5411;)</h4><p>&#x7ED9;&#x7F51;&#x7AD9;&#x4E00;&#x4E2A;&#x9ED8;&#x8BA4;&#x7684;&#x8DEF;&#x7531;,&#x5F53;&#x7F51;&#x7AD9;&#x4EC0;&#x4E48;&#x8DEF;&#x7531;&#x90FD;&#x65E0;&#x6CD5;&#x5339;&#x914D;&#x5230;&#xFF0C;&#x5219;&#x6309;&#x7167;&#x91CD;&#x5B9A;&#x5411;&#x6307;&#x5B9A;&#x7684;&#x8DEF;&#x7531;&#x8FDB;&#x884C;&#x5339;&#x914D;</p>
<p>&#x5982;&#x5230;localhost:3000/ &#x5219;&#x4F1A;&#x8DF3;&#x8F6C;&#x5230;localhost:3000/zqy/about</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;Route path={&quot;/zqy/about&quot;} component={About} /&gt;</span><br><span class="line">&lt;Route path={&quot;/zqy/home&quot;} component={Home} /&gt;</span><br><span class="line">&lt;Redirect to={&apos;/zqy/about&apos;}/&gt;</span><br></pre></td></tr></table></figure>
<h3 id="2-&#x5D4C;&#x5957;&#x8DEF;&#x7531;"><a href="#2-&#x5D4C;&#x5957;&#x8DEF;&#x7531;" class="headerlink" title="2.&#x5D4C;&#x5957;&#x8DEF;&#x7531;"></a>2.&#x5D4C;&#x5957;&#x8DEF;&#x7531;</h3><p>&#x8DEF;&#x7531;&#x7684;&#x5339;&#x914D;&#x662F;&#x4ECE;&#x6700;&#x5F00;&#x59CB;&#x6CE8;&#x518C;&#x7684;&#x5230;&#x6700;&#x540E;&#x6CE8;&#x518C;&#x7684;&#x8FDB;&#x884C;&#x5339;&#x914D;&#xFF0C;&#x6240;&#x4EE5;&#x8DEF;&#x7531;&#x5F00;&#x542F;&#x4E25;&#x683C;&#x5339;&#x914D;&#x4F1A;&#x6709;&#x95EE;&#x9898;&#xFF0C;&#x5BFC;&#x81F4;&#x8DEF;&#x7531;&#x7684;&#x5B50;&#x8DEF;&#x7531;&#x62A5;&#x9519;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&#x7236;&#x8DEF;&#x7531;</span><br><span class="line">&lt;div className=&quot;panel-body&quot;&gt;</span><br><span class="line">    {/* &#x6CE8;&#x518C;&#x8DEF;&#x7531; */}</span><br><span class="line">    &lt;Route path={&quot;/about&quot;} component={About} /&gt;</span><br><span class="line">    &lt;Route path={&quot;/home&quot;} component={Home} /&gt;</span><br><span class="line">    &lt;Redirect to={&apos;/about&apos;}/&gt;</span><br><span class="line">&lt;/div&gt;    </span><br><span class="line">--------------------&#x5B50;&#x8DEF;&#x7531;</span><br><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;h3&gt;&#x6211;&#x662F;Home&#x7684;&#x5185;&#x5BB9;&lt;/h3&gt;</span><br><span class="line">    &lt;ul className=&quot;nav nav-tabs&quot;&gt;</span><br><span class="line">        &lt;li&gt;</span><br><span class="line">            &lt;MyNavLink to={&quot;/home/news&quot;}&gt;News&lt;/MyNavLink&gt;</span><br><span class="line">        &lt;/li&gt;</span><br><span class="line">        &lt;li&gt;</span><br><span class="line">            &lt;MyNavLink to={&quot;/home/message&quot;}&gt;Message&lt;/MyNavLink&gt;</span><br><span class="line">        &lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">    &lt;Route path={&quot;/home/news&quot;} component={News}&gt;&lt;/Route&gt;</span><br><span class="line">    &lt;Route path={&quot;/home/message&quot;} component={Message}&gt;&lt;/Route&gt;</span><br><span class="line">    &lt;Redirect to={&apos;/home/news&apos;}&gt;&lt;/Redirect&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h3 id="3-&#x5411;&#x8DEF;&#x7531;&#x7EC4;&#x4EF6;&#x4F20;&#x9012;&#x53C2;&#x6570;"><a href="#3-&#x5411;&#x8DEF;&#x7531;&#x7EC4;&#x4EF6;&#x4F20;&#x9012;&#x53C2;&#x6570;" class="headerlink" title="3.&#x5411;&#x8DEF;&#x7531;&#x7EC4;&#x4EF6;&#x4F20;&#x9012;&#x53C2;&#x6570;"></a>3.&#x5411;&#x8DEF;&#x7531;&#x7EC4;&#x4EF6;&#x4F20;&#x9012;&#x53C2;&#x6570;</h3><h4 id="3-1-params&#x53C2;&#x6570;"><a href="#3-1-params&#x53C2;&#x6570;" class="headerlink" title="3.1 params&#x53C2;&#x6570;"></a>3.1 params&#x53C2;&#x6570;</h4><p>&#x8DEF;&#x7531;&#x94FE;&#x63A5;(&#x643A;&#x5E26;&#x53C2;&#x6570;)</p>
<p>&#x6CE8;&#x518C;&#x8DEF;&#x7531;(&#x58F0;&#x660E;&#x63A5;&#x6536;)</p>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207131812030.png" alt="image-20220713181245973"></p>
<p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207131813098.png" alt="image-20220713181305050"></p>
<p><strong>&#x6240;&#x4F20;&#x7684;params&#x53C2;&#x6570;&#x90FD;&#x5728;props.match&#x91CC;</strong></p>
<h4 id="3-2-search&#x53C2;&#x6570;"><a href="#3-2-search&#x53C2;&#x6570;" class="headerlink" title="3.2 search&#x53C2;&#x6570;"></a>3.2 search&#x53C2;&#x6570;</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&#x63A5;&#x6536;&#x53C2;&#x6570;&#x683C;&#x5F0F;</span><br><span class="line">&lt;Link to={`/home/message/details/?id=${msgObj.id}&amp;title=${msgObj.title}}&gt;</span><br><span class="line">    {msgObj.title}</span><br><span class="line">&lt;/Link&gt;</span><br><span class="line"></span><br><span class="line">//&#x58F0;&#x660E;&#x53C2;&#x6570;&#x683C;&#x5F0F;</span><br><span class="line">&lt;Route path={&quot;/home/message/details&quot;} component={Details} /&gt; </span><br><span class="line">&#x65E0;&#x9700;&#x58F0;&#x660E;&#x63A5;&#x6536;&#xFF0C;&#x6B63;&#x5E38;&#x6CE8;&#x518C;&#x8DEF;&#x7531;&#x5373;&#x53EF;</span><br><span class="line">--------------</span><br><span class="line">	//&#x6B63;&#x5E38;querystring&#x5DF2;&#x88AB;&#x5E9F;&#x9664;&#xFF0C;&#x5148;&#x8981;&#x4E0B;&#x8F7D;es3&#x7248;&#x672C; npm i querystring-es3</span><br><span class="line">	const querystring=require(&apos;querystring-es3&apos;)</span><br><span class="line"></span><br><span class="line">    const {search}=this.props.location</span><br><span class="line">    //&#x63A5;&#x6536;&#x5230;&#x7684;&#x53C2;&#x6570;&#x662F; ?id=xxx&amp;title=xxx&#x7684;&#x683C;&#x5F0F; (urlencoded&#x7F16;&#x7801;&#x5B57;&#x7B26;&#x4E32;)</span><br><span class="line">    //slice(1)&#x53BB;&#x6389;&#x5B57;&#x7B26;&#x4E32;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B57;&#x6BCD;?</span><br><span class="line">    //&#x7136;&#x540E;&#x901A;&#x8FC7;querystring&#x5E93;&#x91CC;&#x7684;parse&#x65B9;&#x6CD5; &#x8F6C;&#x6362;&#x4E3A; {id=xxx,title=xxx}</span><br><span class="line">    </span><br><span class="line">    //&#x6CE8;querystring&#x91CC;&#x7684;stringify&#x5219;&#x662F;&#x5C06;{id=xxx,title=xxx} &#x53CD;&#x8F6C;</span><br><span class="line">    const {id,title} = querystring.parse(search.slice(1));</span><br></pre></td></tr></table></figure>
<h4 id="3-3-state-&#x53C2;&#x6570;"><a href="#3-3-state-&#x53C2;&#x6570;" class="headerlink" title="3.3 state  &#x53C2;&#x6570;"></a>3.3 state  &#x53C2;&#x6570;</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">//&#x4F20;&#x9012;&#x53C2;&#x6570;</span><br><span class="line">    &lt;Link to={{pathname:&apos;/home/message/details/&apos;,state:{id:msgObj.id,title:msgObj.title}}}&gt;</span><br><span class="line">        {msgObj.title}</span><br><span class="line">&lt;/Link&gt;</span><br><span class="line">//&#x58F0;&#x660E;&#x53C2;&#x6570; &#x65E0;&#x9700;&#x58F0;&#x660E;</span><br><span class="line">&lt;Route path={&quot;/home/message/details&quot;} component={Details} /&gt;</span><br><span class="line"></span><br><span class="line">------</span><br><span class="line">const {id,title}=this.props.location.state//&#x76F4;&#x63A5;&#x8BFB;&#x53D6;&#x5373;&#x53EF;</span><br><span class="line"></span><br><span class="line">&#x5907;&#x6CE8;&#xFF1A;&#x5730;&#x5740;&#x680F;&#x4E0D;&#x4F1A;&#x663E;&#x793A;&#x4FE1;&#x606F;&#xFF0C;&#x5237;&#x65B0;&#x540E;&#x6570;&#x636E;&#x4E5F;&#x4E0D;&#x4F1A;&#x4E22;&#x5F03;(BrowserRouter)</span><br><span class="line">HashRouter&#x5237;&#x65B0;&#x540E;&#x6570;&#x636E;&#x4E22;&#x5F03;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="4-push&#x548C;replace"><a href="#4-push&#x548C;replace" class="headerlink" title="4.push&#x548C;replace"></a>4.push&#x548C;replace</h3><p>push:&#x538B;&#x6808;</p>
<p>replace:&#x66FF;&#x6362;&#x6808;&#x9876;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;Link replace={true} to={{pathname:&apos;/home/message/details/&apos;,state:{id:msgObj.id,title:msgObj.title}}}&gt;</span><br><span class="line">    {msgObj.title}</span><br><span class="line">&lt;/Link&gt;</span><br><span class="line">replace&#x9ED8;&#x8BA4;&#x662F;true</span><br></pre></td></tr></table></figure>
<h3 id="5-&#x7F16;&#x7A0B;&#x5F0F;&#x8DEF;&#x7531;&#x5BFC;&#x822A;"><a href="#5-&#x7F16;&#x7A0B;&#x5F0F;&#x8DEF;&#x7531;&#x5BFC;&#x822A;" class="headerlink" title="5.&#x7F16;&#x7A0B;&#x5F0F;&#x8DEF;&#x7531;&#x5BFC;&#x822A;"></a>5.&#x7F16;&#x7A0B;&#x5F0F;&#x8DEF;&#x7531;&#x5BFC;&#x822A;</h3><p>&#x9664;&#x4E86;&#x4F7F;&#x7528; <code>&lt;router-link&gt;</code> &#x521B;&#x5EFA; a &#x6807;&#x7B7E;&#x6765;&#x5B9A;&#x4E49;&#x5BFC;&#x822A;&#x94FE;&#x63A5;&#xFF0C;&#x6211;&#x4EEC;&#x8FD8;&#x53EF;&#x4EE5;&#x501F;&#x52A9; router &#x7684;&#x5B9E;&#x4F8B;&#x65B9;&#x6CD5;&#xFF0C;&#x901A;&#x8FC7;&#x7F16;&#x5199;&#x4EE3;&#x7801;&#x6765;&#x5B9E;&#x73B0;&#x3002;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#x5229;&#x7528;this.props.history&#x91CC;&#x7684;</span><br><span class="line">replace &#x66FF;&#x6362;&#x6808;&#x9876;&#x7F51;&#x7AD9;</span><br><span class="line">push &#x8DF3;&#x8F6C;&#x7F51;&#x7AD9;</span><br><span class="line">&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#x4E09;&#x79CD;&#x4E0D;&#x540C;&#x4F20;&#x53C2;&#x8DF3;&#x8F6C;</span><br><span class="line">---------------</span><br><span class="line">goBack &#x540E;&#x9000;</span><br><span class="line">goForward &#x524D;&#x8FDB;</span><br><span class="line">go(xx) &#x5B9E;&#x73B0;&#x51E0;&#x7EA7;&#x8DF3;&#x8F6C;</span><br></pre></td></tr></table></figure>
<p>6.withRouter</p>
<p><code>withRouter</code>, &#x505A;&#x7528;&#x662F;&#x5C06;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x5305;&#x88F9;&#x8FDB;<code>Route</code>&#x91CC;&#x9762;, &#x800C;&#x540E;<code>react-router</code>&#x7684;&#x4E09;&#x4E2A;&#x5BF9;&#x8C61;<code>history, location, match</code>&#x5C31;&#x4F1A;&#x88AB;&#x653E;&#x8FDB;&#x8FD9;&#x4E2A;&#x7EC4;&#x4EF6;&#x7684;<code>props</code>&#x5C5E;&#x6027;&#x4E2D;.</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#x7528;&#x6CD5;&#x5C31;&#x662F;</span><br><span class="line">imort {withRouter} from &apos;react-router-dom&apos;</span><br><span class="line">export default withRouter(xxx)</span><br><span class="line">//&#x52A0;&#x5DE5;&#x4E00;&#x4E2A;&#x4E00;&#x822C;&#x7EC4;&#x4EF6;&#xFF0C;&#x4F7F;&#x5F97;&#x5B83;&#x62E5;&#x6709;&#x8DEF;&#x7531;&#x7EC4;&#x4EF6;&#x7684;props&#x5C5E;&#x6027;</span><br><span class="line">//&#x8FD4;&#x56DE;&#x503C;&#x662F;&#x4E00;&#x4E2A;&#x65B0;&#x7EC4;&#x4EF6;</span><br></pre></td></tr></table></figure>
<h3 id="6-BrowserRouter&#x548C;HashRouter"><a href="#6-BrowserRouter&#x548C;HashRouter" class="headerlink" title="6.BrowserRouter&#x548C;HashRouter"></a>6.BrowserRouter&#x548C;HashRouter</h3><p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207142008274.png" alt="image-20220714200826018"></p>
<p><strong>&#x7B2C;4&#x70B9;&#x53C2;&#x7167;&#x6837;&#x5F0F;&#x4E22;&#x5931;</strong></p>
<ul>
<li>&#x951A;&#x70B9;&#xFF1A;  &#x951A;&#x70B9;&#x6709;2&#x79CD;&#x4F7F;&#x7528;&#x65B9;&#x6CD5;&#xFF0C;&#x7B2C;&#x4E00;&#x79CD;&#x65B9;&#x6CD5;&#x662F;&#x8DF3;&#x8F6C;&#x5230;&#x5F53;&#x524D;&#x9875;&#x9762;&#x4E2D;&#x6307;&#x5B9A;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x5373;&#x5355;&#x9875;&#x9762;&#x8DF3;&#x8F6C;&#xFF1B;&#x7B2C;&#x4E8C;&#x79CD;&#x65B9;&#x6CD5;&#x662F;&#x8DF3;&#x8F6C;&#x5230;&#x5176;&#x6307;&#x5B9A;&#x7684;&#x5176;&#x4ED6;&#x9875;&#x9762;&#x3002;</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=<span class="string">&quot;#demo1&quot;</span>&gt;&#x8DF3;&#x8F6C;<span class="number">1</span>&lt;/a&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">id</span>=<span class="string">&quot;demo1&quot;</span>&gt;</span>11111111<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<ul>
<li><p>HashRouter&#x76F8;&#x5F53;&#x4E8E;&#x951A;&#x70B9;&#x5B9A;&#x4F4D;&#xFF0C;&#x56E0;&#x6B64;&#x4E0D;&#x8BBA;#&#x540E;&#x9762;&#x7684;&#x8DEF;&#x5F84;&#x600E;&#x4E48;&#x53D8;&#x5316;&#xFF0C;&#x8BF7;&#x6C42;&#x7684;&#x90FD;&#x76F8;&#x5F53;&#x4E8E;&#x662F;#&#x4E4B;&#x524D;&#x7684;&#x90A3;&#x4E2A;&#x9875;&#x9762;&#x3002;</p>
</li>
<li><p>&#x56E0;&#x4E3A;BrowserRouter&#x6A21;&#x5F0F;&#x4E0B;&#x8BF7;&#x6C42;&#x7684;&#x94FE;&#x63A5;&#x90FD;&#x662F;ip&#x5730;&#x5740;:&#x7AEF;&#x53E3;/xxxx/xxxx&#xFF0C;&#x56E0;&#x6B64;&#x76F8;&#x5F53;&#x4E8E;&#x6BCF;&#x4E2A;URL&#x90FD;&#x4F1A;&#x8BBF;&#x95EE;&#x4E00;&#x4E2A;&#x4E0D;&#x540C;&#x7684;&#x540E;&#x7AEF;&#x5730;&#x5740;&#xFF0C;&#x5982;&#x679C;&#x540E;&#x7AEF;&#x6CA1;&#x6709;&#x8986;&#x76D6;&#x5230;&#x8DEF;&#x7531;&#x5C31;&#x4F1A;&#x4EA7;&#x751F;404&#x9519;&#x8BEF;&#x3002;</p>
</li>
</ul>
<h2 id="6-React-UI&#x7EC4;&#x4EF6;&#x5E93;"><a href="#6-React-UI&#x7EC4;&#x4EF6;&#x5E93;" class="headerlink" title="6.React UI&#x7EC4;&#x4EF6;&#x5E93;"></a>6.React UI&#x7EC4;&#x4EF6;&#x5E93;</h2><h3 id="6-1-1-material-ui-&#x56FD;&#x5916;"><a href="#6-1-1-material-ui-&#x56FD;&#x5916;" class="headerlink" title="6.1.1. material-ui(&#x56FD;&#x5916;)"></a>6.1.1. material-ui(&#x56FD;&#x5916;)</h3><p>\1.   &#x5B98;&#x7F51;: <a target="_blank" rel="noopener" href="http://www.material-ui.com/#/">http://www.material-ui.com/#/</a></p>
<p>\2.   github: <a target="_blank" rel="noopener" href="https://github.com/callemall/material-ui">https://github.com/callemall/material-ui</a></p>
<h3 id="6-1-2-ant-design-&#x56FD;&#x5185;&#x8682;&#x8681;&#x91D1;&#x670D;"><a href="#6-1-2-ant-design-&#x56FD;&#x5185;&#x8682;&#x8681;&#x91D1;&#x670D;" class="headerlink" title="6.1.2. ant-design(&#x56FD;&#x5185;&#x8682;&#x8681;&#x91D1;&#x670D;)"></a>6.1.2. ant-design(&#x56FD;&#x5185;&#x8682;&#x8681;&#x91D1;&#x670D;)</h3><p>\1.   &#x5B98;&#x7F51;: <a target="_blank" rel="noopener" href="https://ant.design/index-cn">https://ant.design/index-cn</a></p>
<p>\2.   Github: <a target="_blank" rel="noopener" href="https://github.com/ant-design/ant-design/">https://github.com/ant-design/ant-design/</a></p>
<p><code>yarn eject</code>&#x66B4;&#x9732;webpack&#x914D;&#x7F6E;&#xFF0C;&#x4E0D;&#x53EF;&#x9006;(&#x4E0D;&#x5EFA;&#x8BAE;)</p>
<p>&#x6253;&#x5F00;antd&#x5B98;&#x7F51;&#xFF0C;&#x6587;&#x6863;(3.x&#x7248;&#x672C;&#x8F83;&#x4E3A;&#x8BE6;&#x7EC6;) &#x770B;</p>
<p>1.&#x9AD8;&#x7EA7;&#x914D;&#x7F6E;&#x7684;&#x8BF4;&#x660E;&#xFF1A;</p>
<p>&#x4E0A;&#x65B9;&#x64CD;&#x4F5C;&#x662F;&#x7528;&#x4E8E;&#x6309;&#x9700;&#x5F15;&#x5165;&#xFF0C;&#x51CF;&#x5C11;&#x5185;&#x5B58;&#x5360;&#x6BD4;</p>
<p>2.&#x81EA;&#x5B9A;&#x4E49;&#x914D;&#x7F6E;&#x7684;&#x8BF4;&#x660E;</p>
<h2 id="7-redux"><a href="#7-redux" class="headerlink" title="7.redux"></a>7.redux</h2><h3 id="1-&#x4ECB;&#x7ECD;-2"><a href="#1-&#x4ECB;&#x7ECD;-2" class="headerlink" title="1.&#x4ECB;&#x7ECD;"></a>1.&#x4ECB;&#x7ECD;</h3><ol>
<li><p>redux&#x662F;&#x4E00;&#x4E2A;&#x4E13;&#x95E8;&#x7528;&#x4E8E;&#x505A;<strong>&#x72B6;&#x6001;&#x7BA1;&#x7406;</strong>&#x7684;JS&#x5E93;(&#x4E0D;&#x662F;react&#x63D2;&#x4EF6;&#x5E93;)&#x3002;</p>
</li>
<li><p>&#x5B83;&#x53EF;&#x4EE5;&#x7528;&#x5728;react, angular, vue(vuex)&#x7B49;&#x9879;&#x76EE;&#x4E2D;, &#x4F46;&#x57FA;&#x672C;&#x4E0E;react&#x914D;&#x5408;&#x4F7F;&#x7528;&#x3002;</p>
</li>
<li><p>&#x4F5C;&#x7528;: &#x96C6;&#x4E2D;&#x5F0F;&#x7BA1;&#x7406;react&#x5E94;&#x7528;&#x4E2D;&#x591A;&#x4E2A;&#x7EC4;&#x4EF6;<strong>&#x5171;&#x4EAB;</strong>&#x7684;&#x72B6;&#x6001;&#x3002;</p>
</li>
</ol>
<h4 id="1-1&#x4F7F;&#x7528;&#x573A;&#x666F;"><a href="#1-1&#x4F7F;&#x7528;&#x573A;&#x666F;" class="headerlink" title="1.1&#x4F7F;&#x7528;&#x573A;&#x666F;"></a>1.1&#x4F7F;&#x7528;&#x573A;&#x666F;</h4><ol>
<li>&#x603B;&#x4F53;&#x539F;&#x5219;&#xFF1A;&#x80FD;&#x4E0D;&#x7528;&#x5C31;&#x4E0D;&#x7528;, &#x5982;&#x679C;&#x4E0D;&#x7528;&#x6BD4;&#x8F83;&#x5403;&#x529B;&#x624D;&#x8003;&#x8651;&#x4F7F;&#x7528;&#x3002;</li>
<li>&#x67D0;&#x4E2A;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#xFF0C;&#x9700;&#x8981;&#x8BA9;&#x5176;&#x4ED6;&#x7EC4;&#x4EF6;&#x53EF;&#x4EE5;&#x968F;&#x65F6;&#x62FF;&#x5230;&#xFF08;&#x5171;&#x4EAB;&#xFF09;&#x3002;</li>
<li>&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x9700;&#x8981;&#x6539;&#x53D8;&#x53E6;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#xFF08;&#x901A;&#x4FE1;&#xFF09;&#x3002;</li>
</ol>
<h4 id="1-2-&#x539F;&#x7406;&#x56FE;"><a href="#1-2-&#x539F;&#x7406;&#x56FE;" class="headerlink" title="1.2 &#x539F;&#x7406;&#x56FE;"></a>1.2 &#x539F;&#x7406;&#x56FE;</h4><p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207142216772.png" alt="redux&#x539F;&#x7406;&#x56FE;"></p>
<h5 id="1-2-1-action"><a href="#1-2-1-action" class="headerlink" title="1.2.1. action"></a>1.2.1. action</h5><ol>
<li><p>&#x52A8;&#x4F5C;&#x7684;&#x5BF9;&#x8C61;</p>
</li>
<li><p>&#x5305;&#x542B;2&#x4E2A;&#x5C5E;&#x6027;</p>
</li>
</ol>
<ul>
<li><p>type&#xFF1A;&#x6807;&#x8BC6;&#x5C5E;&#x6027;, &#x503C;&#x4E3A;&#x5B57;&#x7B26;&#x4E32;, <strong>&#x552F;&#x4E00;, &#x5FC5;&#x8981;&#x5C5E;&#x6027;</strong></p>
</li>
<li><p>data&#xFF1A;&#x6570;&#x636E;&#x5C5E;&#x6027;, &#x503C;&#x7C7B;&#x578B;&#x4EFB;&#x610F;, <strong>&#x53EF;&#x9009;&#x5C5E;&#x6027;</strong></p>
</li>
</ul>
<ol>
<li>&#x4F8B;&#x5B50;&#xFF1A;{ type: &#x2018;ADD_STUDENT&#x2019;,data:{name: &#x2018;tom&#x2019;,age:18} }</li>
</ol>
<h5 id="1-2-2-reduce"><a href="#1-2-2-reduce" class="headerlink" title="1.2.2. reduce"></a>1.2.2. reduce</h5><ol>
<li><p>&#x7528;&#x4E8E;<strong>&#x521D;&#x59CB;&#x5316;&#x72B6;&#x6001;(&#x4F20;&#x9012;&#x72B6;&#x6001;&#x662F;undefined&#xFF0C;type&#x662F;@@init@@)</strong>&#x3001;&#x52A0;&#x5DE5;&#x72B6;&#x6001;&#x3002;</p>
</li>
<li><p>&#x52A0;&#x5DE5;&#x65F6;&#xFF0C;&#x6839;&#x636E;&#x65E7;&#x7684;state&#x548C;action(previousState,action)&#xFF0C; &#x4EA7;&#x751F;&#x65B0;&#x7684;state&#x7684;<strong>&#x7EAF;&#x51FD;&#x6570;</strong>&#x3002;</p>
</li>
</ol>
<h5 id="1-2-3-store"><a href="#1-2-3-store" class="headerlink" title="1.2.3. store"></a>1.2.3. store</h5><p>1.&#x5C06;state&#x3001;action&#x3001;reducer&#x8054;&#x7CFB;&#x5728;&#x4E00;&#x8D77;&#x7684;&#x5BF9;&#x8C61;</p>
<p>2.&#x5982;&#x4F55;&#x5F97;&#x5230;&#x6B64;&#x5BF9;&#x8C61;?</p>
<p>1) import {createStore} from &#x2018;redux&#x2019;</p>
<p>2) import reducer from &#x2018;./reducers&#x2019;</p>
<p>3) const store = createStore(reducer)</p>
<p>3.&#x6B64;&#x5BF9;&#x8C61;&#x7684;&#x529F;&#x80FD;?</p>
<p>1) getState(): &#x5F97;&#x5230;state</p>
<p>2) dispatch(action): &#x5206;&#x53D1;action, &#x89E6;&#x53D1;reducer&#x8C03;&#x7528;, &#x4EA7;&#x751F;&#x65B0;&#x7684;state</p>
<p>3) subscribe(listener): &#x6CE8;&#x518C;&#x76D1;&#x542C;, &#x5F53;&#x4EA7;&#x751F;&#x4E86;&#x65B0;&#x7684;state&#x65F6;, &#x81EA;&#x52A8;&#x8C03;&#x7528;</p>
<h5 id="1-2-4-Action-Creators"><a href="#1-2-4-Action-Creators" class="headerlink" title="1.2.4 Action Creators"></a>1.2.4 Action Creators</h5><p>&#x6839;&#x636E;&#x7EC4;&#x4EF6;&#x4F20;&#x9012;&#x7684;&#x6570;&#x636E;&#x8FDB;&#x884C;&#x5305;&#x88C5;&#x6210;&#x4E00;&#x4E2A;&#x52A8;&#x4F5C;&#x5BF9;&#x8C61;&#x3002;<strong>(&#x975E;&#x5FC5;&#x8981;)</strong></p>
<h3 id="2-&#x6848;&#x4F8B;-API"><a href="#2-&#x6848;&#x4F8B;-API" class="headerlink" title="2.&#x6848;&#x4F8B;(API)"></a>2.&#x6848;&#x4F8B;(API)</h3><p><a href="E:\React\&#x6E90;&#x7801;\redux_test">&#x6848;&#x4F8B;&#x6E90;&#x7801;</a></p>
<p>\1.   Provider&#xFF1A;&#x8BA9;&#x6240;&#x6709;&#x7EC4;&#x4EF6;&#x90FD;&#x53EF;&#x4EE5;&#x5F97;&#x5230;state&#x6570;&#x636E;</p>
<p>\2.   connect&#xFF1A;&#x7528;&#x4E8E;&#x5305;&#x88C5; UI &#x7EC4;&#x4EF6;&#x751F;&#x6210;&#x5BB9;&#x5668;&#x7EC4;&#x4EF6;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">import { connect } from &apos;react-redux&apos;</span><br><span class="line">connect(</span><br><span class="line">    mapStateToprops,</span><br><span class="line">    mapDispatchToProps</span><br><span class="line">)(Counter)</span><br></pre></td></tr></table></figure>
<p>\3.   mapStateToprops&#xFF1A;&#x5C06;&#x5916;&#x90E8;&#x7684;&#x6570;&#x636E;&#xFF08;&#x5373;state&#x5BF9;&#x8C61;&#xFF09;&#x8F6C;&#x6362;&#x4E3A;UI&#x7EC4;&#x4EF6;&#x7684;&#x6807;&#x7B7E;&#x5C5E;&#x6027;</p>
<p>\4.   mapDispatchToProps&#xFF1A;&#x5C06;&#x5206;&#x53D1;action&#x7684;&#x51FD;&#x6570;&#x8F6C;&#x6362;&#x4E3A;UI&#x7EC4;&#x4EF6;&#x7684;&#x6807;&#x7B7E;&#x5C5E;&#x6027;</p>
<p>5.&#x5F02;&#x6B65;&#x64CD;&#x4F5C;</p>
<p>react&#x9ED8;&#x8BA4;&#x662F;&#x540C;&#x6B65;&#xFF0C;&#x8981;&#x60F3;&#x5B9E;&#x73B0;&#x5F02;&#x6B65;&#x5219;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x4E2D;&#x95F4;&#x4EF6;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">yarn add redux-thunk</span><br><span class="line">stroe.js</span><br><span class="line">-----------------</span><br><span class="line"> import thunk from &apos;redux-thunk&apos;</span><br><span class="line">//&#x66B4;&#x9732;store</span><br><span class="line">export default createStore(countReducer,applyMiddleware(thunk))</span><br></pre></td></tr></table></figure>
<h3 id="3-react-redux&#x5E93;"><a href="#3-react-redux&#x5E93;" class="headerlink" title="3.react-redux&#x5E93;"></a>3.react-redux&#x5E93;</h3><p><img src="https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202207151750666.png" alt="react-redux&#x6A21;&#x578B;&#x56FE;"></p>
<h4 id="1-&#x5BF9;redux&#x7684;&#x4F18;&#x5316;"><a href="#1-&#x5BF9;redux&#x7684;&#x4F18;&#x5316;" class="headerlink" title="1.&#x5BF9;redux&#x7684;&#x4F18;&#x5316;"></a>1.&#x5BF9;redux&#x7684;&#x4F18;&#x5316;</h4><p>1.Provider :  &#x8BA9;&#x6240;&#x6709;&#x7EC4;&#x4EF6;&#x90FD;&#x53EF;&#x4EE5;&#x5F97;&#x5230;state&#x6570;&#x636E;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x5C06;store&#x5B58;&#x653E;&#x5728;&#x9879;&#x76EE;&#x6700;&#x5916;&#x5C42;&#x7EC4;&#x4EF6;</span><br><span class="line">index.jsx</span><br><span class="line">------------------------</span><br><span class="line">ReactDOM.render(</span><br><span class="line">    &lt;Provider store={store}&gt;</span><br><span class="line">        &lt;App/&gt;</span><br><span class="line">    &lt;/Provider&gt;,</span><br><span class="line">    document.getElementById(&apos;root&apos;)</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line">//&#x4E14;react-redux&#x81EA;&#x52A8;&#x68C0;&#x6D4B;redux&#x4E2D;&#x72B6;&#x6001;&#x7684;&#x53D8;&#x5316;&#xFF0C;&#x4E0D;&#x9700;&#x8981;&#x518D;&#x901A;&#x8FC7;stroe.subsribe&#x8FDB;&#x884C;&#x8C03;&#x7528;render</span><br></pre></td></tr></table></figure>
<p>2.&#x6574;&#x5408;UI&#x548C;&#x5BB9;&#x5668;&#x7EC4;&#x4EF6;&#x548C;mapDispatchToProps&#x7684;&#x7B80;&#x5199;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&#x53EF;&#x4EE5;&#x5C06;&#x5BB9;&#x5668;&#x7EC4;&#x4EF6;&#x548C;UI&#x7EC4;&#x4EF6;&#x653E;&#x5728;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x5185;</span><br><span class="line">export default connect(</span><br><span class="line">	state =&gt; ({count:state}),</span><br><span class="line"></span><br><span class="line">	//mapDispatchToProps&#x7684;&#x4E00;&#x822C;&#x5199;&#x6CD5;</span><br><span class="line">	/* dispatch =&gt; ({</span><br><span class="line">		jia:number =&gt; dispatch(createIncrementAction(number)),</span><br><span class="line">		jian:number =&gt; dispatch(createDecrementAction(number)),</span><br><span class="line">		jiaAsync:(number,time) =&gt; dispatch(createIncrementAsyncAction(number,time)),</span><br><span class="line">	}) */</span><br><span class="line"></span><br><span class="line">	//mapDispatchToProps&#x7684;&#x7B80;&#x5199;</span><br><span class="line">	{</span><br><span class="line">		// &#x4F20;&#x9012;&#x4E00;&#x4E2A;&#x521B;&#x5EFA;action&#x7684;&#x51FD;&#x6570;</span><br><span class="line">		jia:createIncrementAction,</span><br><span class="line">		jian:createDecrementAction,</span><br><span class="line">		jiaAsync:createIncrementAsyncAction,</span><br><span class="line">	}</span><br><span class="line">)(Count)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h4 id="2-&#x6570;&#x636E;&#x5171;&#x4EAB;"><a href="#2-&#x6570;&#x636E;&#x5171;&#x4EAB;" class="headerlink" title="2.&#x6570;&#x636E;&#x5171;&#x4EAB;"></a>2.&#x6570;&#x636E;&#x5171;&#x4EAB;</h4><p><a href="E:\React\&#x6E90;&#x7801;\redux_test\src">&#x6848;&#x4F8B;</a></p>
<h3 id="4-&#x7EAF;&#x51FD;&#x6570;&#x548C;&#x9AD8;&#x9636;&#x51FD;&#x6570;"><a href="#4-&#x7EAF;&#x51FD;&#x6570;&#x548C;&#x9AD8;&#x9636;&#x51FD;&#x6570;" class="headerlink" title="4.&#x7EAF;&#x51FD;&#x6570;&#x548C;&#x9AD8;&#x9636;&#x51FD;&#x6570;"></a>4.&#x7EAF;&#x51FD;&#x6570;&#x548C;&#x9AD8;&#x9636;&#x51FD;&#x6570;</h3><p><strong>&#x5B66;&#x4E60;js&#x5BF9;&#x6570;&#x7EC4;&#x5BF9;&#x8C61;&#x7684;&#x65B9;&#x6CD5;</strong></p>
<h4 id="1-&#x7EAF;&#x51FD;&#x6570;"><a href="#1-&#x7EAF;&#x51FD;&#x6570;" class="headerlink" title="1.&#x7EAF;&#x51FD;&#x6570;"></a><strong>1.&#x7EAF;&#x51FD;&#x6570;</strong></h4><p><strong>&#x4E00;&#x7C7B;&#x7279;&#x522B;&#x7684;&#x51FD;&#x6570;: &#x53EA;&#x8981;&#x662F;&#x540C;&#x6837;&#x7684;&#x8F93;&#x5165;(&#x5B9E;&#x53C2;)&#xFF0C;&#x5FC5;&#x5B9A;&#x5F97;&#x5230;&#x540C;&#x6837;&#x7684;&#x8F93;&#x51FA;(&#x8FD4;&#x56DE;)</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">function demo(a)</span><br><span class="line">{</span><br><span class="line">    return Math.random()+a //&#x5219;&#x540C;&#x6837;&#x7684;&#x8F93;&#x5165;&#xFF0C;&#x5F97;&#x5230;&#x7684;&#x7ED3;&#x679C;&#x4E0D;&#x540C;&#xFF0C;&#x975E;&#x7EAF;&#x51FD;&#x6570;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h5 id="&#x7EA6;&#x675F;"><a href="#&#x7EA6;&#x675F;" class="headerlink" title="&#x7EA6;&#x675F;"></a>&#x7EA6;&#x675F;</h5><p>1) &#x4E0D;&#x5F97;&#x6539;&#x5199;&#x53C2;&#x6570;&#x6570;&#x636E;</p>
<p>2) &#x4E0D;&#x4F1A;&#x4EA7;&#x751F;&#x4EFB;&#x4F55;&#x526F;&#x4F5C;&#x7528;&#xFF0C;&#x4F8B;&#x5982;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#xFF0C;&#x8F93;&#x5165;&#x548C;&#x8F93;&#x51FA;&#x8BBE;&#x5907;</p>
<p>&#x5982;&#x56E0;&#x4E3A;&#x65AD;&#x7F51;&#x7B49;&#x539F;&#x56E0;&#xFF0C;&#x5BFC;&#x81F4;&#x7ED3;&#x679C;&#x4E0D;&#x540C;</p>
<p>3) &#x4E0D;&#x80FD;&#x8C03;&#x7528;Date.now()&#x6216;&#x8005;Math.random()&#x7B49;&#x4E0D;&#x7EAF;&#x7684;&#x65B9;&#x6CD5; </p>
<p><strong>reducer&#x662F;&#x4E00;&#x4E2A;&#x7EAF;&#x51FD;&#x6570;&#xFF0C;&#x4E0D;&#x80FD;&#x4FEE;&#x6539;&#x53C2;&#x6570;preState&#xFF0C;&#x5E76;&#x4E14;&#x5F53;&#x4F60;&#x8FD4;&#x56DE;preState&#x65F6;&#xFF0C;redux/react-redux&#x5E76;&#x4E0D;&#x77E5;&#x9053;&#x6570;&#x636E;&#x5DF2;&#x7ECF;&#x66F4;&#x6539;&#xFF08;preState&#x662F;&#x5BF9;&#x8C61;&#x5F15;&#x7528;&#xFF0C;&#x59CB;&#x7EC8;&#x6307;&#x5411;&#x4E00;&#x4E2A;&#x5730;&#x5740;&#xFF09;&#xFF0C;&#x800C;&#x8FD9;&#x91CC;&#x5BF9;preState&#x8FDB;&#x884C;&#x4E86;push&#x64CD;&#x4F5C;&#xFF0C;&#x5E76;&#x628A;&#x64CD;&#x4F5C;&#x540E;&#x7684;preState&#x8FD4;&#x56DE;&#x3002;</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">export default function personReducer(preState=initState,action){</span><br><span class="line">    // console.log(&apos;personReducer@#@#@#&apos;);</span><br><span class="line">    const {type,data} = action</span><br><span class="line">    switch (type) {</span><br><span class="line">        case ADD_PERSON: //&#x82E5;&#x662F;&#x6DFB;&#x52A0;&#x4E00;&#x4E2A;&#x4EBA;</span><br><span class="line">            //preState.push(data)</span><br><span class="line">            //return preState&#x5219;&#x4F1A;&#x6570;&#x636E;&#x66F4;&#x6539;&#x5931;&#x8D25;</span><br><span class="line">            return [data,...preState]</span><br><span class="line">        default:</span><br><span class="line">            return preState</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<h4 id="2-&#x9AD8;&#x9636;&#x51FD;&#x6570;"><a href="#2-&#x9AD8;&#x9636;&#x51FD;&#x6570;" class="headerlink" title="2.&#x9AD8;&#x9636;&#x51FD;&#x6570;"></a>2.&#x9AD8;&#x9636;&#x51FD;&#x6570;</h4><p>1.&#x7406;&#x89E3;: &#x4E00;&#x7C7B;&#x7279;&#x522B;&#x7684;&#x51FD;&#x6570;</p>
<p>1) &#x60C5;&#x51B5;1: &#x53C2;&#x6570;&#x662F;&#x51FD;&#x6570;</p>
<p>2) &#x60C5;&#x51B5;2: &#x8FD4;&#x56DE;&#x662F;&#x51FD;&#x6570;</p>
<p>2.&#x5E38;&#x89C1;&#x7684;&#x9AD8;&#x9636;&#x51FD;&#x6570;: </p>
<p>1) &#x5B9A;&#x65F6;&#x5668;&#x8BBE;&#x7F6E;&#x51FD;&#x6570;</p>
<p>2) &#x6570;&#x7EC4;&#x7684;forEach()/map()/filter()/reduce()/find()/bind()</p>
<p>3) promise</p>
<p>4) react-redux&#x4E2D;&#x7684;connect&#x51FD;&#x6570;</p>
<p>3.&#x4F5C;&#x7528;: &#x80FD;&#x5B9E;&#x73B0;&#x66F4;&#x52A0;&#x52A8;&#x6001;, &#x66F4;&#x52A0;&#x53EF;&#x6269;&#x5C55;&#x7684;&#x529F;&#x80FD;</p>
<h3 id="5-&#x5F00;&#x53D1;&#x8005;&#x5DE5;&#x5177;"><a href="#5-&#x5F00;&#x53D1;&#x8005;&#x5DE5;&#x5177;" class="headerlink" title="5.&#x5F00;&#x53D1;&#x8005;&#x5DE5;&#x5177;"></a>5.&#x5F00;&#x53D1;&#x8005;&#x5DE5;&#x5177;</h3><ol>
<li>&#x4E0B;&#x8F7D;Redux-DelTools(&#x6D4F;&#x89C8;&#x5668;&#x62D3;&#x5C55;&#x5546;&#x5E97;)</li>
<li>&#x5B89;&#x88C5;&#x5DE5;&#x5177;&#x4F9D;&#x8D56;&#x5305;</li>
</ol>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev redux-devtools-extension</span><br><span class="line">    ----------</span><br><span class="line">stroe.jsx</span><br><span class="line">import { composeWithDevTools } from &quot;redux-devtools-extension&quot;;</span><br><span class="line">export default createStore(</span><br><span class="line">    allReducer,</span><br><span class="line">    composeWithDevTools(applyMiddleware(thunk))</span><br><span class="line">);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="6-&#x6253;&#x5305;&#x9879;&#x76EE;"><a href="#6-&#x6253;&#x5305;&#x9879;&#x76EE;" class="headerlink" title="6.&#x6253;&#x5305;&#x9879;&#x76EE;"></a>6.&#x6253;&#x5305;&#x9879;&#x76EE;</h3><p>1.&#x9996;&#x5148;&#x8FD0;&#x884C; npm run build &#x8FDB;&#x884C;&#x9879;&#x76EE;&#x6253;&#x5305;  &#x4F1A;&#x751F;&#x6210;build&#x6587;&#x4EF6;&#x5939;</p>
<p>2.&#x8FDB;&#x884C;&#x672C;&#x5730;&#x9879;&#x76EE;&#x90E8;&#x7F72;  &#x5B89;&#x88C5;serve&#x5E93; </p>
<p><code>npm i serve -g</code>  &#x7136;&#x540E; serve xx&#x6587;&#x4EF6;&#x5939; &#x8FDB;&#x884C;&#x5FEB;&#x901F;&#x751F;&#x6210;&#x9759;&#x6001;&#x670D;&#x52A1;&#x5668;</p>
<p>&#x77E5;&#x8BC6;&#x70B9;&#xFF1A;</p>
<p>1.&#x89E3;&#x6784;&#x8D4B;&#x503C;</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">state = { number: &quot;1&quot;,id:&apos;1&apos; };</span><br><span class="line">render() {</span><br><span class="line">    const {number:zqy}=this.state</span><br><span class="line">    //&#x89E3;&#x6784;state&#x91CC;&#x7684;number&#xFF0C;&#x7136;&#x540E;&#x8D4B;&#x503C;&#x7ED9;zqy</span><br><span class="line">    return &lt;div&gt;{zqy}&lt;/div&gt;;</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://zqywuxie.github.io">wu xie</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://zqywuxie.github.io/2022/08/05/React/">https://zqywuxie.github.io/2022/08/05/React/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://zqywuxie.github.io" target="_blank">思无邪</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/React/">React</a></div><div class="post_share"><div class="social-share" data-image="https://raw.githubusercontent.com/jerryc127/CDN/master/cover/default_bg.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-full"><a href="/2022/08/07/python%E6%A8%A1%E5%9E%8B%E5%BB%BA%E7%AB%8B/"><img class="prev-cover" src="https://raw.githubusercontent.com/jerryc127/CDN/master/cover/default_bg.png" onerror="onerror=null;src='https://xingqiu-tuchuang-1256524210.cos.ap-shanghai.myqcloud.com/5339/202208041745209.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">python模型建立</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#React"><span class="toc-number">1.</span> <span class="toc-text">React</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#1-%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.1.</span> <span class="toc-text">1.介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%8E%9F%E7%94%9Fjs%E7%9A%84%E7%BC%BA%E7%82%B9"><span class="toc-number">1.1.1.</span> <span class="toc-text">1.原生js的缺点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-React%E7%9A%84%E7%89%B9%E7%82%B9"><span class="toc-number">1.1.2.</span> <span class="toc-text">2.React的特点</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E8%99%9A%E6%8B%9FDOM%E7%9A%84%E5%88%9B%E5%BB%BA%E6%96%B9%E5%BC%8F"><span class="toc-number">1.1.3.</span> <span class="toc-text">3.虚拟DOM的创建方式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E4%BD%BF%E7%94%A8jsx%E8%AF%AD%E6%B3%95"><span class="toc-number">1.1.3.1.</span> <span class="toc-text">1.使用jsx语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%8E%9F%E7%94%9Fjs%E8%AF%AD%E6%B3%95"><span class="toc-number">1.1.3.2.</span> <span class="toc-text">2.原生js语法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E6%AF%94%E8%BE%83"><span class="toc-number">1.1.3.3.</span> <span class="toc-text">3.比较</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-JSX"><span class="toc-number">1.1.4.</span> <span class="toc-text">4.JSX</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E4%BB%8B%E7%BB%8D-1"><span class="toc-number">1.1.4.1.</span> <span class="toc-text">1.介绍</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E8%AF%AD%E6%B3%95%E8%A7%84%E5%88%99"><span class="toc-number">1.1.4.2.</span> <span class="toc-text">2.语法规则</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E6%A8%A1%E5%9D%97%E5%92%8C%E7%BB%84%E4%BB%B6%EF%BC%8C%E6%A8%A1%E5%9D%97%E5%8C%96%E5%92%8C%E7%BB%84%E4%BB%B6%E5%8C%96"><span class="toc-number">1.1.5.</span> <span class="toc-text">5.模块和组件，模块化和组件化</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-%E9%9D%A2%E5%90%91%E7%BB%84%E4%BB%B6%E7%BC%96%E7%A8%8B"><span class="toc-number">1.2.</span> <span class="toc-text">2.面向组件编程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E5%87%BD%E6%95%B0%E5%BC%8F%E5%92%8C%E7%B1%BB%E5%BC%8F%E7%BB%84%E4%BB%B6"><span class="toc-number">1.2.1.</span> <span class="toc-text">1.函数式和类式组件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E7%9A%84%E4%B8%89%E5%A4%A7%E6%A0%B8%E5%BF%83%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.2.</span> <span class="toc-text">2.组件实例的三大核心属性</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-state-%E5%AE%9E%E4%BE%8B%E7%8A%B6%E6%80%81"><span class="toc-number">1.2.2.1.</span> <span class="toc-text">1.state 实例状态</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-2%E4%BF%AE%E6%94%B9"><span class="toc-number">1.2.2.1.1.</span> <span class="toc-text">1.2修改</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-3%E7%AE%80%E5%86%99"><span class="toc-number">1.2.2.1.2.</span> <span class="toc-text">1.3简写</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-4state%E6%80%BB%E7%BB%93"><span class="toc-number">1.2.2.1.3.</span> <span class="toc-text">1.4state总结</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-props-%E7%BB%84%E4%BB%B6%E5%86%85%E9%83%A8%E5%B1%9E%E6%80%A7"><span class="toc-number">1.2.2.2.</span> <span class="toc-text">2.props 组件内部属性</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#2-1%E5%B1%95%E5%BC%80%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">1.2.2.2.1.</span> <span class="toc-text">2.1展开运算符</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-2props%E9%99%90%E5%88%B6"><span class="toc-number">1.2.2.2.2.</span> <span class="toc-text">2.2props限制</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-3-props%E7%AE%80%E5%86%99"><span class="toc-number">1.2.2.2.3.</span> <span class="toc-text">2.3.props简写</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-4-%E7%B1%BB%E5%BC%8F%E7%BB%84%E4%BB%B6%E7%9A%84%E6%9E%84%E9%80%A0%E5%99%A8%E5%92%8Cprops"><span class="toc-number">1.2.2.2.4.</span> <span class="toc-text">2.4.类式组件的构造器和props</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-5%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8props"><span class="toc-number">1.2.2.2.5.</span> <span class="toc-text">2.5函数式组件使用props</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-6%E6%80%BB%E7%BB%93"><span class="toc-number">1.2.2.2.6.</span> <span class="toc-text">2.6总结</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-refs%E4%B8%8E%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="toc-number">1.2.2.3.</span> <span class="toc-text">3.refs与事件处理</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#3-1%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%B1%BB%E5%9E%8B%E7%9A%84ref-%E4%B8%8D%E6%8E%A8%E8%8D%90"><span class="toc-number">1.2.2.3.1.</span> <span class="toc-text">3.1字符串类型的ref(不推荐)</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-2%E5%9B%9E%E8%B0%83ref"><span class="toc-number">1.2.2.3.2.</span> <span class="toc-text">3.2回调ref</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-3-creatRef%E5%88%9B%E5%BB%BAref%E5%AE%B9%E5%99%A8"><span class="toc-number">1.2.2.3.3.</span> <span class="toc-text">3.3 creatRef创建ref容器</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-4%E6%80%BB%E7%BB%93ref"><span class="toc-number">1.2.2.3.4.</span> <span class="toc-text">3.4总结ref</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-5%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="toc-number">1.2.2.3.5.</span> <span class="toc-text">3.5事件处理</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E8%8E%B7%E5%8F%96%E8%A1%A8%E5%8D%95%E6%95%B0%E6%8D%AE-%E6%B6%89%E5%8F%8A%E5%88%B0ajax%E7%9F%A5%E8%AF%86"><span class="toc-number">1.2.3.</span> <span class="toc-text">3.获取表单数据(涉及到ajax知识)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E9%9D%9E%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6"><span class="toc-number">1.2.3.1.</span> <span class="toc-text">1.非受控组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%8F%97%E6%8E%A7%E7%BB%84%E4%BB%B6"><span class="toc-number">1.2.3.2.</span> <span class="toc-text">2.受控组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0%E5%92%8C%E5%87%BD%E6%95%B0%E6%9F%AF%E9%87%8C%E5%8C%96"><span class="toc-number">1.2.3.3.</span> <span class="toc-text">3.高阶函数和函数柯里化</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-number">1.2.4.</span> <span class="toc-text">4.生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE"><span class="toc-number">1.2.4.0.1.</span> <span class="toc-text">1.生命周期图</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%97%A7-%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">1.2.4.0.1.1.</span> <span class="toc-text">(旧)注意事项</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%96%B0-%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-number">1.2.4.0.1.2.</span> <span class="toc-text">(新)注意事项</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#%E6%80%BB%E7%BB%93"><span class="toc-number">1.2.4.0.1.3.</span> <span class="toc-text">总结</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E7%BB%84%E4%BB%B6%E6%8C%82%E8%BD%BD-%E5%8D%B8%E8%BD%BD%E4%BE%8B%E5%AD%90"><span class="toc-number">1.2.4.0.2.</span> <span class="toc-text">2. 组件挂载&#x2F;卸载例子</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90"><span class="toc-number">1.2.4.0.3.</span> <span class="toc-text">3.生命周期回调函数&#x2F;生命周期钩子函数&#x2F;生命周期钩子</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-DOM%E7%9A%84diffing%E7%AE%97%E6%B3%95"><span class="toc-number">1.2.5.</span> <span class="toc-text">5.DOM的diffing算法</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E4%BE%8B%E5%AD%90"><span class="toc-number">1.2.5.1.</span> <span class="toc-text">1.例子</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-React%E5%BA%94%E7%94%A8"><span class="toc-number">1.3.</span> <span class="toc-text">3.React应用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#3-1-%E8%84%9A%E6%89%8B%E6%9E%B6"><span class="toc-number">1.3.1.</span> <span class="toc-text">3.1.脚手架</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-2%E7%BB%93%E6%9E%84%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.3.2.</span> <span class="toc-text">3.2结构介绍</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-3-%E4%BE%8B%E5%AD%90"><span class="toc-number">1.3.3.</span> <span class="toc-text">3.3 例子</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-4%E6%A0%B7%E5%BC%8F%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">1.3.4.</span> <span class="toc-text">3.4样式的模块化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E6%9B%B4%E6%8D%A2css%E7%9A%84%E5%91%BD%E5%90%8D"><span class="toc-number">1.3.4.1.</span> <span class="toc-text">1.更换css的命名</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-5%E5%8A%9F%E8%83%BD%E7%95%8C%E9%9D%A2%E7%9A%84%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A0%81%E6%B5%81%E7%A8%8B%EF%BC%88%E9%80%9A%E7%94%A8%EF%BC%89"><span class="toc-number">1.3.5.</span> <span class="toc-text">3.5功能界面的组件化编码流程（通用）</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-6%E6%A1%88%E4%BE%8B"><span class="toc-number">1.3.6.</span> <span class="toc-text">3.6案例</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-6-1%E6%80%BB%E7%BB%93"><span class="toc-number">1.3.6.1.</span> <span class="toc-text">3.6.1总结</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-react-ajax"><span class="toc-number">1.4.</span> <span class="toc-text">4.react ajax</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E9%85%8D%E7%BD%AE%E4%BB%A3%E7%90%86"><span class="toc-number">1.4.1.</span> <span class="toc-text">1.配置代理</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1%E6%96%B9%E6%B3%951-proxy"><span class="toc-number">1.4.1.1.</span> <span class="toc-text">1.1方法1 proxy</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-2%E6%96%B9%E6%B3%95-%E9%85%8D%E7%BD%AEsetupProxy-js"><span class="toc-number">1.4.1.2.</span> <span class="toc-text">1.2方法 配置setupProxy.js</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-github%E6%90%9C%E7%B4%A2%E6%A1%88%E4%BE%8B"><span class="toc-number">1.4.2.</span> <span class="toc-text">2.github搜索案例</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%9F%A5%E8%AF%86%E7%82%B9"><span class="toc-number">1.4.2.1.</span> <span class="toc-text">知识点:</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E8%BF%9E%E7%BB%AD%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC"><span class="toc-number">1.4.2.1.1.</span> <span class="toc-text">1.连续解构赋值</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E5%A4%9A%E6%AC%A1%E8%AF%B7%E6%B1%82%E7%BD%91%E7%AB%99%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-number">1.4.2.1.2.</span> <span class="toc-text">2.多次请求网站的问题</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-%E5%8F%91%E8%AF%B7%E6%B1%82%E7%9A%84%E4%BD%8D%E7%BD%AE"><span class="toc-number">1.4.2.1.3.</span> <span class="toc-text">3.发请求的位置</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4-%E5%85%B3%E4%BA%8E%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E8%BF%94%E5%9B%9E%E5%80%BC%E7%9A%84%E6%8B%AC%E5%8F%B7%E9%97%AE%E9%A2%98"><span class="toc-number">1.4.2.1.4.</span> <span class="toc-text">4.关于箭头函数返回值的括号问题</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5-%E6%90%9C%E7%B4%A2%E6%95%B0%E6%8D%AE%E7%9A%84%E9%99%90%E5%88%B6"><span class="toc-number">1.4.2.1.5.</span> <span class="toc-text">5.搜索数据的限制</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6-%E6%B6%88%E6%81%AF%E8%AE%A2%E9%98%85-%E5%8F%91%E5%B8%83%E6%9C%BA%E5%88%B6"><span class="toc-number">1.4.2.1.6.</span> <span class="toc-text">6.消息订阅-发布机制</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#7-%E6%8B%93%E5%B1%95-fetch%E5%8F%91%E5%B8%83%E8%AF%B7%E6%B1%82"><span class="toc-number">1.4.2.1.7.</span> <span class="toc-text">7.拓展 fetch发布请求</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-React%E8%B7%AF%E7%94%B1"><span class="toc-number">1.5.</span> <span class="toc-text">5.React路由</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E7%9B%B8%E5%85%B3%E7%90%86%E8%A7%A3"><span class="toc-number">1.5.1.</span> <span class="toc-text">1.相关理解</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1-SPA%E7%90%86%E8%A7%A3"><span class="toc-number">1.5.1.1.</span> <span class="toc-text">1.1 SPA理解</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-2-%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1%E5%8E%9F%E7%90%86"><span class="toc-number">1.5.1.2.</span> <span class="toc-text">1.2 前端路由原理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-3-react-router-dom%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-number">1.5.1.3.</span> <span class="toc-text">1.3 react-router-dom的理解</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%9F%A5%E8%AF%86%E7%82%B9%EF%BC%9A"><span class="toc-number">1.5.1.3.1.</span> <span class="toc-text">知识点：</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#1-%E4%B8%80%E8%88%AC%E7%BB%84%E4%BB%B6%E5%92%8C%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6-location-history-match"><span class="toc-number">1.5.1.3.1.1.</span> <span class="toc-text">1.一般组件和路由组件(location,history,match)</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#2-NavLink%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">1.5.1.3.1.2.</span> <span class="toc-text">2.NavLink的使用</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#3-NavLink%E7%9A%84%E5%B0%81%E8%A3%85"><span class="toc-number">1.5.1.3.1.3.</span> <span class="toc-text">3.NavLink的封装</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-4-Switch%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">1.5.1.4.</span> <span class="toc-text">1.4 Switch的使用</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-5-%E8%A7%A3%E5%86%B3%E6%A0%B7%E5%BC%8F%E4%B8%A2%E5%A4%B1"><span class="toc-number">1.5.1.5.</span> <span class="toc-text">1.5 解决样式丢失</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-6-%E8%B7%AF%E7%94%B1%E7%9A%84%E7%B2%BE%E5%87%86%E5%8C%B9%E9%85%8D%E5%92%8C%E6%A8%A1%E7%B3%8A%E5%8C%B9%E9%85%8D"><span class="toc-number">1.5.1.6.</span> <span class="toc-text">1.6 路由的精准匹配和模糊匹配</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-7-Redirect%E4%BD%BF%E7%94%A8-%E9%87%8D%E5%AE%9A%E5%90%91"><span class="toc-number">1.5.1.7.</span> <span class="toc-text">1.7 Redirect使用(重定向)</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1"><span class="toc-number">1.5.2.</span> <span class="toc-text">2.嵌套路由</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%90%91%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E4%BC%A0%E9%80%92%E5%8F%82%E6%95%B0"><span class="toc-number">1.5.3.</span> <span class="toc-text">3.向路由组件传递参数</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-1-params%E5%8F%82%E6%95%B0"><span class="toc-number">1.5.3.1.</span> <span class="toc-text">3.1 params参数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2-search%E5%8F%82%E6%95%B0"><span class="toc-number">1.5.3.2.</span> <span class="toc-text">3.2 search参数</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-3-state-%E5%8F%82%E6%95%B0"><span class="toc-number">1.5.3.3.</span> <span class="toc-text">3.3 state  参数</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-push%E5%92%8Creplace"><span class="toc-number">1.5.4.</span> <span class="toc-text">4.push和replace</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA"><span class="toc-number">1.5.5.</span> <span class="toc-text">5.编程式路由导航</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-BrowserRouter%E5%92%8CHashRouter"><span class="toc-number">1.5.6.</span> <span class="toc-text">6.BrowserRouter和HashRouter</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-React-UI%E7%BB%84%E4%BB%B6%E5%BA%93"><span class="toc-number">1.6.</span> <span class="toc-text">6.React UI组件库</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#6-1-1-material-ui-%E5%9B%BD%E5%A4%96"><span class="toc-number">1.6.1.</span> <span class="toc-text">6.1.1. material-ui(国外)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-1-2-ant-design-%E5%9B%BD%E5%86%85%E8%9A%82%E8%9A%81%E9%87%91%E6%9C%8D"><span class="toc-number">1.6.2.</span> <span class="toc-text">6.1.2. ant-design(国内蚂蚁金服)</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-redux"><span class="toc-number">1.7.</span> <span class="toc-text">7.redux</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E4%BB%8B%E7%BB%8D-2"><span class="toc-number">1.7.1.</span> <span class="toc-text">1.介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-1%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF"><span class="toc-number">1.7.1.1.</span> <span class="toc-text">1.1使用场景</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-2-%E5%8E%9F%E7%90%86%E5%9B%BE"><span class="toc-number">1.7.1.2.</span> <span class="toc-text">1.2 原理图</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-2-1-action"><span class="toc-number">1.7.1.2.1.</span> <span class="toc-text">1.2.1. action</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-2-2-reduce"><span class="toc-number">1.7.1.2.2.</span> <span class="toc-text">1.2.2. reduce</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-2-3-store"><span class="toc-number">1.7.1.2.3.</span> <span class="toc-text">1.2.3. store</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-2-4-Action-Creators"><span class="toc-number">1.7.1.2.4.</span> <span class="toc-text">1.2.4 Action Creators</span></a></li></ol></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%A1%88%E4%BE%8B-API"><span class="toc-number">1.7.2.</span> <span class="toc-text">2.案例(API)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-react-redux%E5%BA%93"><span class="toc-number">1.7.3.</span> <span class="toc-text">3.react-redux库</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%AF%B9redux%E7%9A%84%E4%BC%98%E5%8C%96"><span class="toc-number">1.7.3.1.</span> <span class="toc-text">1.对redux的优化</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E6%95%B0%E6%8D%AE%E5%85%B1%E4%BA%AB"><span class="toc-number">1.7.3.2.</span> <span class="toc-text">2.数据共享</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E7%BA%AF%E5%87%BD%E6%95%B0%E5%92%8C%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0"><span class="toc-number">1.7.4.</span> <span class="toc-text">4.纯函数和高阶函数</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E7%BA%AF%E5%87%BD%E6%95%B0"><span class="toc-number">1.7.4.1.</span> <span class="toc-text">1.纯函数</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%BA%A6%E6%9D%9F"><span class="toc-number">1.7.4.1.1.</span> <span class="toc-text">约束</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E9%AB%98%E9%98%B6%E5%87%BD%E6%95%B0"><span class="toc-number">1.7.4.2.</span> <span class="toc-text">2.高阶函数</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7"><span class="toc-number">1.7.5.</span> <span class="toc-text">5.开发者工具</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E6%89%93%E5%8C%85%E9%A1%B9%E7%9B%AE"><span class="toc-number">1.7.6.</span> <span class="toc-text">6.打包项目</span></a></li></ol></li></ol></li></ol></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2022 By wu xie</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a><br>
<img src="https://static.dy208.cn/o_1dfilp8ruo521thr1hvf18ji17soa.png">
<a href="https://beian.miit.gov.cn/"  style="color:#f72b07" target="_blank">蜀ICP备2022021825号</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="fa-solid fa-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="fa-solid fa-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="fa-solid fa-arrow-rotate-right"></i></div><div class="rightMenu-item" id="menu-home"><i class="fa-solid fa-house"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link" href="/archives/"><i class="fa-solid fa-archive"></i><span>文章归档</span></a><a class="rightMenu-item menu-link" href="/categories/"><i class="fa-solid fa-folder-open"></i><span>文章分类</span></a><a class="rightMenu-item menu-link" href="/tags/"><i class="fa-solid fa-tags"></i><span>文章标签</span></a></div><div class="rightMenu-group rightMenu-line rightMenuNormal"><div class="rightMenu-item" id="menu-translate"><i class="fa-solid fa-earth-asia"></i><span>繁简切换</span></div><div class="rightMenu-item" id="menu-darkmode"><i class="fa-solid fa-moon"></i><span>切换模式</span></div></div></div><div id="rightmenu-mask"></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"></div><script src="https://cdn.jsdelivr.net/gh/weilain/cdn-photo/js/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async data-pjax src="/js/rightMenu.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-theme-volantis@latest/source/js/issues.min.js"></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/fireworks.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><script type="text/javascript" src="/js/crash_cheat.js"></script><!-- hexo injector body_end start -->
  <script data-pjax src="https://cdn.jsdelivr.net/gh/Zfour/hexo-github-calendar@1.21/hexo_githubcalendar.js"></script>
  <script data-pjax>
        function GithubCalendarConfig(){
            var git_githubapiurl ="https://python-github-calendar-api.vercel.app/api?zqywuxie";
            var git_color =['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f'];
            var git_user ="zqywuxie";
            var parent_div_git = document.getElementById('recent-posts');
            var git_div_html = '<div class="recent-post-item" style="width:100%;height:auto;padding:10px;"><div id="github_loading" style="width:10%;height:100%;margin:0 auto;display: block"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve"><path fill="#d0d0d0" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg></div><div id="github_container"></div></div>';
            if(parent_div_git && location.pathname =='/'){
                console.log('已挂载github calendar')
                // parent_div_git.innerHTML=git_div_html+parent_div_git.innerHTML // 无报错，但不影响使用(支持pjax跳转)
                parent_div_git.insertAdjacentHTML("afterbegin",git_div_html) // 有报错，但不影响使用(支持pjax跳转)
            };
            GithubCalendar(git_githubapiurl,git_color,git_user)
        }
        if(document.getElementById('recent-posts')){
            GithubCalendarConfig()
        }
    </script>
    <style>#github_container{min-height:280px}@media screen and (max-width:650px) {#github_container{background-image:;min-height:0px}}</style>
    <style></style><script defer src="https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js"></script><script defer src="https://npm.elemecdn.com/hexo-butterfly-tag-plugins-plus@latest/lib/assets/issues.js"></script><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":150,"height":300,"hOffset":20,"vOffset":-20},"mobile":{"show":false},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/"});</script><script async>window.onload=function(){var a=document.createElement('script'),b=document.getElementsByTagName('script')[0];a.type='text/javascript',a.async=!0,a.src='/sw-register.js?v='+Date.now(),b.parentNode.insertBefore(a,b)};</script></body></html>